There was a time when you had to choose between creating universal mobile apps and native apps. Universal apps used web technologies like HTML and JavaScript, which often performed badly in mobile devices. Native apps performed better because they were written separately for each platform you wanted to support, but they were expensive and required a specialized development team for each platform.
Flutter, an open source framework developed by Google, changed that. Today, developers have more options for creating fast mobile apps that run on multiple platforms, including Ionic, React Native, and Xamarin. Flutter and its built-in programming language, Dart, remain popular and widely used.
Flutter 3, released earlier this year, adds support for macOS and Linux desktop apps, in addition to the original Android, iOS, web, and Windows targets. The release also includes performance improvements to fix noticeable UI pauses.
Multiplatform development with Flutter 3
Flutter is an open source framework developed by Google that lets you build natively compiled, multiplatform applications from a single codebase. Flutter 3 supports six platform targets: Android, iOS, Windows, macOS, Linux, and web applications.
Flutter widgets are built using a modern framework inspired by React. As shown in Figure 1 below, the most used widgets and layouts are text widgets, Flexbox row and column layouts, stack absolute positioning layouts, positioned widgets, and container widgets.
Let’s say that you are building a multiplatform application that starts with the Flutter MaterialApp widget. This widget builds various other useful widgets at the root of your application, including a navigator. The navigator manages a stack of widgets identified by strings, also known as routes in Flutter. The navigator lets you transition smoothly between application screens.
To create an iOS-centric design, see the Cupertino components package. The Flutter team recommends only using the Cupertino components on iOS-only apps; for multiplatform apps, consider using another set of widgets; for example, the Material Design set.
The first three screenshots below show stateless widgets, gesture handling, and stateful widgets. It’s worthwhile to go through the entire Flutter development tutorial, starting with the widgets intro we’ve started here. It’s also worth trying the DartPad samples and viewing the Flutter gallery, as well as trying the Flutter codelabs.
Beyond widgets and layouts, Flutter has navigation and routing, animations, actions and intents, shortcuts, state management, networking and HTTP, JSON serialization, and Firebase integration.
Figure 1 shows a Flutter Material widget example using DartPad in a web browser. The Dart code is to the left and the web display is to the right.
IDGFigure 1. A Flutter Material widget example using DartPad.
Figure 2 shows an example of gesture handling in Flutter. The onTap method of the stateless GestureDetector widget attached to the Engage button fires when the button is pressed.
IDGFigure 2. Flutter gesture handling example.
Figure 3 is an example of a stateful widget. Pressing the Increment ElevatedButton widget triggers its onPressed method, which calls the private function _increment. That calls setState() to tell Flutter that something has changed, and increments the _counter variable. Then, the framework calls the build() method to redraw the button and text.
IDGFigure 3. A stateful widget example.
Flutter and Dart
Flutter is powered by Dart, a language optimized for fast apps on any platform. Dart looks rather like Java, Kotlin, Swift, and TypeScript (see Figure 4 for a comparison). If you understand any object-oriented language, you’ll be able to pick up Dart quickly. It’s worth going through at least the Dart tour.
A very basic Dart program might be:
// Define a function.
void printInteger(int aNumber) {
print('The number is $aNumber.'); // Print to console.
}
// This is where the app starts executing.
void main() {
var number = 42; // Declare and initialize a variable.
printInteger(number); // Call a function.
}
Dart is strongly typed, but type annotations are optional because Dart can infer types. The preferred style is to use var and type inference for local variables, and strong typing for functions and public variables. Unlike Java, Dart doesn’t have the keywords public, protected, and private. If an identifier starts with an underscore (_), it’s private to its library.
Dart can compile to ARM and x64 machine code for mobile, desktop, and back end applications, as well as to JavaScript for the web. In debug mode, Dart lets you hot-load running apps after you save changes to the source code. Dart has both JIT (just-in-time) and AOT (ahead-of-time) compilers.
Dart has optional null safety. If your minimum SDK constraint (in your application’s pubspec.yaml file) is at least 2.12.0, then you have opted into null safety. In that case, only variables with a type followed by a question mark (e.g., “int?") are allowed to contain nulls.
IDGFigure 4. Dart compared to Kotlin, Swift, and TypeScript.
Flutter 3 features and upgrades
In a blog post, Tim Sneath, Google’s product manager for Flutter and Dart, summarized new features in Flutter 3, noting that “Flutter 3 completes our roadmap from a mobile-centric to a multiplatform framework.”
Flutter 3 expands available platform targets to include macOS and Linux desktop app support, fully integrates Flutter with Firebase, adds native development support for Apple Silicon, and includes numerous productivity and performance features.
Flutter Showcase and Flutter Gallery
The Flutter Showcase is essentially a collection of case studies about production apps built with Flutter. It’s most useful to managers considering Flutter.
The Flutter Gallery holds a collection of widgets, behaviors, and vignettes that demonstrate what Flutter does and how it behaves, and is most useful to developers and designers. You can view the Gallery on the web or run it locally on any of the supported platforms using the Flutter gallery repository.
Installing Flutter
You can install Flutter on Windows, macOS, Linux, or Chrome OS. Exactly how you install depends on the system. You have a choice of downloading a system-specific .zip file or tarball and unpacking it, or cloning the repository. Then, you’ll need to add the flutter tool to your path and run flutter doctor. I’ve shown the output of flutter doctor below.
Running "flutter pub get" in flutter_tools... 5.1s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.1, on Mac OS X 10.15.7 19H1922 darwin-x64,
locale en-US)
[✗] Android toolchain - develop for Android devices
✗ Unable to locate Android SDK.
Install Android Studio from:
https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK
components.
(or visit https://flutter.dev/docs/get-started/install/macos#android-setup
for detailed instructions).
If the Android SDK has been installed to a custom location, please use
`flutter config --android-sdk` to update to that location.
[!] Xcode - develop for iOS and macOS (Xcode 12.4)
✗ Flutter requires Xcode 13 or higher.
Download the latest version or update via the Mac App Store.
✗ CocoaPods not installed.
CocoaPods is used to retrieve the iOS and macOS platform side's plugin
code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To install see
https://guides.cocoapods.org/using/getting-started.html#installation for
instructions.
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] IntelliJ IDEA Ultimate Edition (version 2022.1.1)
[✓] IntelliJ IDEA Ultimate Edition (version 2022.1.1)
[✓] VS Code (version 1.67.1)
[✓] Connected device (2 available)
[✓] HTTP Host Availability
You can see in the output that my Intel MacBook Pro is too old to support the minimum version of Xcode required for iOS and macOS flutter development. The Flutter team needs Xcode 13 to create universal Intel/M1 macOS binaries. I can develop for Android by installing the Android SDK toolchain, and I can already develop for the web. Adding the Flutter plugin to Visual Studio Code took less than a minute. If I ever get serious about developing multiplatform applications with Flutter, I will need to upgrade at least one of my Macs.
Conclusion
Flutter 3 is an interesting benchmark, offering stability on six platforms while continuing to focus on performance improvements. For developers who need to create multiplatform apps, now might be a good time to consider Flutter.
Copyright © 2022 IDG Communications, Inc.
Discussion about this post