Impressions from Google I/O 2019: Flutter
Google I/O ’19 was a whirlwind conference, but one key element stood out: Flutter. Flutter is Google’s new solution “building beautiful, native applications for mobile, web, and desktop from a single codebase” https://flutter.dev/. Google is pushing hard for developers to adopt their new technology. There were 5 full sessions about Flutter, extolling its ease of use and powerful development potential.
What is it?
Flutter is a UI Toolkit, and uses the Dart programming language (which looks like a mix of Kotlin/Swift and JavaScript) to develop apps in a Declarative UI Patterns fashion. This means that you’ll be building up your UI programmatically, using composition with Widgets to set up the properties of your layouts. Flutter also uses reactive state management, which means your UI will automatically update for your variable updates — making async development a breeze. Flutter development is also helped by the Dart runtime’s Stateful Hot Reload, which makes any changes to the code instantly show up on the emulator you are testing on, without the need for a redeploy. Thus, Stateful Hot Reload is available whether you use Android Studio, Visual Studio Code, or run your app from command line. Flutter is also unit testable — both the UI and the business logic can be unit tested. Flutter allows you to build new apps or to add Flutter modules and features to existing apps.
Performance
Flutter is a high-performance solution. Unlike React Native, which runs as JavaScript and must communicate across a bridge to the native OS, Flutter compiles down to binary and gives you an executable. This Flutter executable already includes the native assets, and can run directly on your platform’s hardware, so you get faster runtimes in comparison to React Native. For more on Flutter vs. React, I suggest you read this article.
Dart can also communicate back and forth between Kotlin, Java, Swift, and Objective C code, which opens up the possibility for a Flutter module to include code from other languages and communicate between existing apps.
Writing Android vs. iOS
One of Flutter’s biggest draws is the ability to quickly write features for Android & iOS with a native feel and assets that match Material Design / iOS design. But how does it do that? When you set up a Flutter project, you can choose to set it up for both Android and iOS. Flutter has the Material Components library for Material Design native Android widgets, and the Cupertino library for iOS native widgets.
Some features of native Android / iOS behavior are handled for you, such as scrolling. For others, you need to decide which widget component you want to use. Fortunately, Flutter has a helpful check built in for you: when you build with a target platform, Flutter will give you
You can use this target platform to decide which component you’d like to build. Because Flutter requires you to develop your widgets with composition, it’s easy to pull out the common code both Android and iOS use, and wrap them in whatever native platform component you’d like to use.
Potential of Flutter with Existing apps
Flutter has a lot of potential for quick new app development, but where it really shines is in the ability to write quick features or screens and add them into existing apps, perhaps for A/B testing or small, short lived features. You can do this by creating a Flutter library module in your Flutter project with Android & iOS targets. Your Flutter module can be built as a gradle project for Android that you can add to your existing Android project (this is still in Beta, but should be in Stable form around July), and your Flutter module can be built as an iOS framework and added to an existing iOS project (still in Alpha).
Concerns about Flutter
There are still a few remaining concerns about developing with Flutter. Add-to-App is still in Beta for Android and Alpha for iOS, so the ability to use Flutter with existing apps in production isn’t there yet. Developers using Flutter will need to learn the system and also pick up the Dart language, and since the Declarative UI patterns are made through composition, there are concerns about readability, scalability, and maintenance.
Speaking to other developers who have worked directly in Flutter, it seems like it’s easy to create simpler layouts, such as view pagers, recycler views, etc. but when it comes to more complex layouts, with inclusions such as Google Maps, Flutter doesn’t appear to have an easy solution yet. Since Flutter must be built in with all its native Android & iOS assets, it remains to be seen if Flutter will be able to keep up with UI changes (although its development team assured us at Google IO that they will) and be able to create more complex UI elements. We’ll have to see how the tool matures.
Finally, Flutter lifecycle is something to keep in mind when developing. Although Flutter doesn’t have to adhere to the lifecycle of Android or of iOS, being an executable, developers still need to consider the lifecycle of widgets and of the executable itself, especially when inserting into an existing app.
Summary
All in all, Flutter has a lot of potential as another solution for native-like Android / iOS development. It has the potential to grow into other areas such as desktop, web, and even watch development from the same code base, while keeping a native feel for all areas. “Some big companies are using it, such as Alibaba (Android, iOS), Tencent (Android, iOS), and Google Ads (Android, iOS)” https://medium.com/asos-techblog/flutter-vs-react-native-for-ios-android-app-development-c41b4e038db9. It’s a new UI Toolkit that warrants looking into. Hope to see you there!
Google IO 2019 Flutter Videos
“All screenshots / pictures in this article were taken from the Google IO 2019 Flutter sessions, available from the Flutter videos sourced above.”
