Building and Testing Flutter Apps

Mobile app developers face a decision at the onset of a project on whether to build apps using the native development environment (eg. Swift and Xcode for iOS), use a cross-platform development framework, or just go with responsive web apps.

Each option has its pros and cons. For the longest time, using the native development environments for each platform, or building responsive web apps, was the only viable option due to a lack of maturity in the cross-platform frameworks.

The last few years has seen tremendous advancement in the cross-platform space however, and have reached a level of maturity as to be not only the most viable, but also the most cost efficient way, to build native apps. The first cross-platform frameworks were based on WebViews. Examples include PhoneGap and Cordova.

The most prevalent, mature and popular cross-platform development frameworks to date are: ReactNative, Ionic, Electron NativeScript, and Xamarin.

Enter Flutter.

Flutter is another step forward in the maturing cross-platform native app dev space. Flutter is Google’s response to Facebook’s ReactNative and is used for creating native apps for both iOS and Android.

Flutter is described as a reactive framework and does in fact take its inspiration from React. The core theme being that you build your UI out of widgets and, when the underlying widget state changes, the framework is smart enough to minimize the needed changes to the render tree. In fact, the Flutter renderer only renders widgets that need to be updated on the screen (and unchanged widgets even if moved are effectively bit block transferred from the cache). All of which makes it blazingly fast from a UI perspective (think smooth scrolling).

Update October 22nd: If you're looking for a step-by-step tutorial on building and deploying a flutter app, please see our follow-up post of the series here:

Unlike ReactNative, however, Flutter, does have an official list of UI components which will make developers far more productive.

Which brings up another interesting point about Flutter. Flutter widgets are neither the native OEM widgets, and nor are they WebViews. They're flutter widgets.

Flutter supports hot reload which makes it soooo much easier to build out your UI and experiment with changes. What makes it really interesting however, is that it supports hot reloading while maintaining the state, on emulators, simulators and physical devices.

Flutter also gives you complete access to the native features of the device and the SDKs for that device. For example, the following code interrogates the battery level of the device:

Future<Null> getBatteryLevel() async {
  var batteryLevel = 'unknown';
  try {
    int result = await methodChannel.invokeMethod('getBatteryLevel');
    batteryLevel = 'Battery level: $result%';
  } on PlatformException {
    batteryLevel = 'Failed to get battery level.';
  }
  setState(() {
    _batteryLevel = batteryLevel;
  });
}

It is interesting that Flutter (i.e. Google) chose to not utilize Angular while Ionic does. One would assume that the React style architecture and the Dart language were a better technical decision that resulted in the lack of Angular support.

Talking of Dart - this language is well suited for a reactive view based framework which may create many objects that are incredibly short lived. As in one frame. Dart uses generational garbage collection collection which is highly efficient for these short-lived objects. Dart is also responsible for the extremely fast stateful hot reload feature of Flutter. In addition, its "Ahead of Time" compilation, reminiscent of static languages, results in a more predictable runtime.

Flutter is of course new and hasn’t proven itself with the killer-app yet. And if history teaches us anything, these frameworks often present challenges when in their infancy. For example, AirBNB dropped ReactNative due in part to a series of technical (and organizational) challenges. So it’s too early to comment on whether Flutter overcomes issues that often beset such nascent frameworks. That said, the heritage is strong.

Testing Flutter Apps

The hot reload feature makes the development process very iterative from a “dev/testing” cycle. However, any serious mobile app will still of course go through the proper QA cycle and be tested on real-devices, not just emulators.

At Kobiton, we make it really easy to test your Flutter apps on real-devices. When you’re ready to ship or test your app, simply upload your IPA or APK to your Kobiton account and test it on hundreds of different device and OS combinations. You’ll be able to select the devices and even run manual or automated tests.

Despite Flutter being a cross-platform development environment, there is no substitute for testing on real devices and even the most well engineered app and underlying framework can still experience crashes or UI issues on certain hardware and OS combinations. Don’t believe us? Ask us to do a free health-check on your app and we’ll pin-point which devices it’s crashing on!

We’re excited with the release preview of Flutter and looking forward to the official stabilized 1.0. In the meantime, you can use the Kobiton platform to test your flutter apps!

If you're looking for step-by-step guidance on building and deploying your first Flutter app, follow our Tutorial here.