Flutter at OY! Indonesia: Key Differences in Flutter vs Native Development

Published in

OY! Indonesia

6 min readJun 4, 2020

Authors: Harditya Ramadhan, Randi Dwinandra, Mohammad Nuruddin Effendi

Dart is Our New Main Language

Modern native mobile language are written mainly in Swift (iOS) and Kotlin (Android). But now, there are also two major cross-platform framework Javascript (React Native) and Dart (Flutter). While React Native has its own niche, but Flutter looks much more promising as per https://insights.stackoverflow.com/survey/2020 Flutter become top 3 for the most loved frameworks in 2020. Nice!

Dart is much more similar to Swift and Kotlin rather than Objective-C and Java, so when you create a Platform-Channel to connect Flutter with Native, we encourage you to use Swift and Kotlin instead of Objective-C and Java because of it’s similarities which makes easier to switch context between Flutter and Native. One of the nicest thing about Dart is that its UI layout does not require any additional templating languages (e.g. XML, JSX), or special visual tools like storyboard. Besides, as an engineer we do not need to toggle to a design mode thinking what to do in a program way. In Dart, all is done in a program way and available in one place. Nice!

Hot Reload

Hey native developers, when you add 5dp of your margin layout, how long does it takes to see the actual result in your app? A minute (at best)? In Flutter, the change will be instantaneous. For mobile engineers like us, there is nothing as exciting as seeing how a slight code change can reflect instantaneously in your running app. Well, Flutter has this amazing feature called Hot-Reload. This feature allows you to see the reflected changes after building UI, bug fixes or even adding certain features to your app without running a fresh built app over and over again. Just run your app then change its UI or logic code, press Cmd+S to save and voila your app will reflected by your changes instantly.

Actually, this feature is not that novel. Other cross-platform frameworks such as react-native has this feature too. But still, compared to current native development, this feature is interesting and will definitely boost your productivity.

Everything is a Widget

“Everything is a Widget”, when we learn Flutter for the first time, this quote was something that we always found in every Flutter get-started articles. We thoughts it was just marketing gimmicks or Flutter’s motto; However, as we go more hands-on, we realize it it was not. Unlike native frameworks that separate views, view controllers, layouts, and other properties, Flutter has a consistent and unified object model called Widget. A widget in Flutter can be a structural element (e.g. Button, Text), stylistics element (e.g. Font, Color) scheme, layout aspect element (e.g. Padding), or even user-interaction element (e.g. GestureDetector). All of these elements are widgets and a widget itself (built-in or predefined widget) could be an organized collection of other widgets (This is called a Widget Tree).

Practically, maybe not everything is a widget, but almost everything is. So the first thing to learn when it comes to Flutter development was understanding the concept of widget. The main backbone of building Flutter apps is the widget and “Everything is a Widget” was a simple yet powerful concept to understand by Flutter developer.

Platform-Channel as a Bridge

One of the biggest challenge for mobile cross-platform framework is how to help engineers create different kinds of features for different devices and platforms with a little effort as possible. Flutter uses a flexible system that allows you to call platform-specific API in Swift or Objective-C code in iOS, or in Kotlin or Java in Android. It is something like you make a bridge from your Flutter Code and then it will connect to the other side in Native Code.

Platform-Channel operates on the principle of sending and receiving messages without code generation. The communication is bidirectional and asynchronous. Flutter sends message to the host (e.g. iOS or Android) and expect a response back, either as success or failure. When the message is received on the host’s side, we can execute the necessary logic in Native Code to call any platform-specific APIs and send a response back to the Flutter application through the channel.

Benefits

One of the benefits of Platform Channel is that the communication is asynchronous and bidirectional. This means that Platform Channel does not block execution of other tasks that are independent of Native Code. Once the Native Code finishes its work, the result will be passed to Flutter, and the appropriate callback will be triggered and vice versa.

Another benefit is serialization and deserialization of values to and from messages that happens automatically when you send and receive values from message channels.

Limitations

Currently, the channel method can be called only from Main Thread (from the main isolate). Calling it from a spawned isolate is not possible at the moment. Performing long-running operations on the Main Thread can cause “junk” on the Flutter application, and the platform side will block other message channels. To perform long-running operations, you can do it on Background Thread and when it finishes, you can jump back to Main Thread to execute a channel method.

You can read the official documentation to know more about Platform-Channel.

Unit and Widget Testing

Testing in Flutter

Testing? Why should we care about testing?

Imagine if you do something critical or sensitive like moving money and you messed up that caused major problem, you lose customer money, customer trust, etc.
You can prevent that incident by doing a test.

Unit Testing

Unit testing is software testing method which you will create a script test for every code you implemented.

The Code
Let’s say you have a code such as the following:

int add(int a, int b) {
  return a+b;
}

Unit Test

You can make sure that your code work as you expect by adding a test script to make sure that your code behave like you want. This is an example test code for the above code:

test("Add function", () {
  final result = add(1, 3);
  expect(result, 4);
});

Widget Testing

Since everything in Flutter is a widget, you will always be using widgets when you develop in Flutter. To make sure that your widget is behaving as expected, you can test your widget with the built-in widget testing framework. This is an example of widget testing:

testWidgets('find a Hello OY! Text', (WidgetTester tester) async {
  // Build an app with a Text widget that displays the letter 'Hello OY!'.
  await tester.pumpWidget(MaterialApp(
    home: Scaffold(
      body: Text('Hello OY!'),
    ),
  ));

  // Find a widget that displays the letter 'Hello OY!'.
  expect(find.text('Hello OY!'), findsOneWidget);
});

Declarative Programming & State Management

If you are coming from native development then you will be familiar with imperative programming. You initialized your UI and then later change the attribute, like someUI.setText();. It is different with Flutter; Flutter is declarative. This means that Flutter builds user interface to reflect your current app state. In Flutter it is okay to rebuild parts of your UI from scratch instead of modifying it.

In Flutter, you build your UI based on the current active state. Let’s say you declare 2 state for your current UI which is SomeScreenStateLoading and SomeScreenStateLoaded. If your current active state is SomeScreenStateLoading then you want to show a loading animation and when you change the state to SomeScreenStateLoaded then you want to show the UI. Because you render the UI based on current active state, it is important to make sure that you implement your widget correctly based on current active state.

This is the Part 3 in a series of articles about Flutter in OY! Indonesia.

If you are passionate about solving interesting and impactful challenges, OY! Indonesia would be a great playground for you to unleash your creativity. Join us!

Want to experience the most seamless payment experience? Try to download OY! in Google Play and App Store and please feel free to give us feedback about it 👌🏼.