UI Development with Flutter: First Impressions

Organizations across every industry are laying plans to provide a mobile app to access their services. And with nearly 90% of mobile internet time spent in apps, it’s not hard to see why.

While the web dev world has spent its time solving problems around responsive design, users have gone native. According to Statista, about one-fifth of the millions of apps on the Apple App Store are games, and performance concerns around graphics rendering dictates using native platforms to code them.

In this article we’ll dive into cross-platform mobile and web UI development, take a look at Flutter, the Google-built SDK made just for this purpose, and show how you can use it in conjunction with CrafterCMS.

Cross-Platform Mobile and Web UI Development

Android Runtime offers Ahead-Of-Time (AOT) compilation of optimized bytecode for efficiency, and Java is the official language for Android dev work. Kotlin is incredibly popular and removes much of the boilerplate required in Java apps, but devs working on the platform with Kotlin need to know both languages for troubleshooting and interfacing with many popular libraries.

Apple iOS devs are in a similar boat. While Objective C was Cupertino's standard development language for many years and many essential libraries are written in it, many devs disliked its focus on backwards compatibility with C and its loose typing. Swift was born to address Objective C's shortcomings, and knowledge of both is essential for developing natively on iOS devices.

Given the need already to gain proficiency in three or four languages for cross-platform mobile development, why would anyone want to layer another on top? For many businesses, the need to maintain separate, device-specific code bases is a killer to development velocity and maintenance.

Product and design teams become siloed into iOS and Android groups, with web groups also in the fray. The promise of cross-platform development is a single code base, and a single product group, that can deploy anywhere.

It's important to note that cross-platform frameworks don't eliminate the need for proficiency on the native platforms. Any layer on top of the native platform will require a bridge.Troubleshooting often requires knowledge of the underlying native architecture.

Enter Flutter

Flutter is Google's contribution to the cross-platform development landscape introduced in 2015. Unlike Angular, Google incorporates Flutter into its own apps - Ads, AdWords, Assistant, and Photos are built on Flutter.

It's truly cross-platform and supports Android, iOS, Windows, MacOS, Linux, and Greentea. If you've been building desktop apps on the JVM or native Android mobile apps, Flutter also removes the need for Gradle from your workflow.

The Flutter framework provides the Flutter Engine, written in C++, as an application runtime. Its Engine provides low-level rendering, platform-specific SDKs, and Flutter's core libraries including animation and graphics, file and network I/O, accessibility support, and a plugin architecture.

The framework includes Material Design widgets for use on Android and Cupertino widgets for use on iOS. As a nice feature, the framework is reactive by default: there's no need to integrate complex libraries such as RxJS to use an observer pattern as with RN for highly dynamic apps.

Flutter is built on Google's Dart programming language. Dart has a C-based syntax and should feel familiar to most native mobile and web devs. It mandates a main() function for execution entry, like C. While very similar to Javascript in syntax, it's type safe and removes a lot of JS's pointy sticks that necessitate type-safe language supersets like TypeScript: 'two' - 1 returns an error, not a result. It supports fluent APIs, classes, and classical inheritance. Dart compiles to Javascript for the web (via dart2js) and to self-contained native executables for Android, iOS, and desktop apps.

Flutter Pros

Near-Native Performance: Since Dart compiles to native code on the platform it's running on, there's no overhead related to maintaining bridges to a runtime engine like Xamarin and React Native require, or even more expensive webviews like Ionic and Cordova require.

Hot Reload: Flutter provides instant updates to the UI on native hardware and in emulators without needing a restart. This feature has become standard in web view frameworks like React (via build tools like Webpack) and contributes to a great developer experience.

Cross-Platform Compatibility: Flutter includes its own widget kits that are similar to native widgets. This means that a widget that works on one platform will work on any other, and also meet "look and feel" requirements of different app stores.

Cost Effective: Flutter is great for developing minimum-viable products (MVPs) as a first step in bringing new products to market. A single developer can produce a cross-platform app that works across mobile platforms, and the native API integrations are well implemented. Google has a deep bench of experience in this area - they wrote and maintain the Android OS itself.

Good IDE support: Both Android Studio and VS Code provide a complete development environment for Dart and Flutter.

Fast Growth: Flutter is a relatively new framework and is just now starting to gain serious traction, having just moved out of Beta in 2019. That said, large organizations are using it, like Groupon, eBay, Alibaba, Google, and Square (some of which are also CrafterCMS users). It gained 55k stars on Github in its first month after production release, and LinkedIn Data says Flutter is the fastest growing skill among developers. 

Flutter-based To-do List App Example

Flutter Cons

Dart Language Shortcomings: There's features devs really would like to see in Dart, though many of them are planned for future releases like Swift and Javascript's destructuring assignment.

Flutter Web Isn't There Yet: flutter build web produces large bundle sizes, and has lackluster Google Lighthouse scores. These are likely growing pains and aren't inherent to the architecture of Flutter.

Backends for Flutter

Google publishes a Flutter SDK for their Firebase cloud database offering. Flutter is also a great choice to use with a headless CMS, like CrafterCMS. Dart-specific SDKs aren't necessary: the js library provides a simple annotation to use Javascript libraries, like CrafterCMS's JS SDK:

Combining CrafterCMS and Flutter

CrafterCMS is always on the lookout for the latest technologies to help our users innovate. That means offering as many points of integration and approaches as possible so that organizations can bring the best tools available into their tech stack. 

Flutter is an intriguing option for those organizations needing truly cross-platform UI development tools, and CrafterCMS is a great choice for providing a content repository, workflow tools, and an attractive administrative UI for authors and editors that want to work with Flutter.

Learn more about CrafterCMS’s Javascript SDK here. You may also freely download the latest version of the open source CrafterCMS project here.