Building for iOS and Android: Getting started with Google's Flutter
Video: Why Android developers at Google I/O are excited about Flutter
Google's new Flutter cross-platform development platform is intended to build code that runs on iOS and Android. Perhaps best thought of as a competitor to Microsoft's Xamarin, it uses Google's Dart language, with a C++ runtime and a set of user interface widgets for iOS and for Android, based on each target mobile platform's look-and-feel.
A public beta has recently been released, and Google is already using Flutter internally for some of its own applications. That's a good sign, so I decided to take a look at how Google expects developers to build and test their Flutter applications.
Flutter development; code running on a test OnePlus 5T
One of the selling points for Flutter is speed of development and testing, building on familiar development tooling and on direct connections to test devices. The set up process is a little complex, and you're going to need to delve into your development system settings to get everything working. That's to be expected for beta code, and I'd expect the final release to have a more sophisticated set up process. Things are changing fast too, so with regular updates for Flutter and its tooling, be prepared for regular downloads.
I set up my Flutter dev tooling on my usual laptop. It's a Core i7 Surface Book, so there's plenty of headroom for development tooling. Installation does need some work; you'll need to have an up-to-date PowerShell install and have Git for Windows, as you'll need to clone the Flutter GitHub repository to get access to libraries and sample code as part of the install.
See: How to build a successful developer career (free PDF)
The Flutter SDK is the first part of the install; once down and unzipped where you want to host your files, you'll need to launch the Flutter console from a batch file. You can also add the path to the SDK to Windows' environment variables, so you can run the console anywhere.
Flutter's built-in doctor command will check for dependencies, which will probably mean you'll need to install Android Studio for an up to date set of Android SDKs and the Android device simulator. Once that's installed, you'll need to use Android Studio to create a test virtual device, if you're not planning on testing apps on an attached device. My simulated device was an x86 Pixel 2 running Oreo, as I was intending to use a OnePlus 5T as my development target, and it seemed to be the closest.
A quick command line-driven test of Flutter code running on the Android simulator.
While I planned to use Visual Studio Code to write and debug applications, I also set up Android Studio as an alternative development environment. It's a customized version of JetBrains IntelliJ IDE, so familiar to anyone who's used IntelliJ in the past. You'll need to add the Flutter plugin to Android Studio, which will also install Dart support. Once installed, run Flutter's doctor to ensure all the appropriate dependencies have been set.
VS Code support is attractive, as it's my preferred quick development environment for most languages these days. One thing to note: you'll still need to have Android Studio installed for simulators and for SDK support. Once those are installed, launch VS Code and use the extensions tool to install the Dart and Flutter extensions. You'll then need to run Flutter's doctor from inside the VS Code command line tool, to make sure everything is set up correctly.
I then set up the OnePlus 5T as a developer device. Getting into developer mode in a modern Android device is a bit like tracking down an easter egg in any other app. To enable it you'll need to tap on the Android build number in your device's Software info part of its Settings. Once you've done that seven times, you'll find a new Developer Options section in Settings, where you can enable USB debugging before connecting the phone to your development PC with a USB cable.
Working with the Flutter in the Visual Studio Code debugger.
One of the key advantages of Flutter is its ability to live debug code on devices, with hot redeployment of code changes while still debugging an app. There's no need to recompile and redeploy code, just save or click on the hot reload button in your editor when you make changes to your code and want to try them out.
Flutter comes with a handful of sample apps, so I used one to check that my development set up was ready to go. I loaded the default app framework, which generates a basic Material Design app. Once the app and its supporting libraries had been set up, I connected my test device, hit F5, and watched it open on the OnePlus phone's screen.
See: What is DevOps? An executive guide to agile development and IT operations
VS Code's debugging tools work well with Flutter. You can set breakpoints, step through code, and keep an eye on variables. Just to test the hot reload option, I made a quick change to some text, and clicked save. The new version of the code automatically loaded, without me having to leave the debugger, and started running.
Google's done an interesting job building a portable and easy to set up development environment for Flutter. From starting the Flutter download to having running code took less than half an hour, though of course tuning my development tools and environment took a little longer. But the Flutter tools are in place, and my code is running on my test device. Now it's time to build an app of my own, exploring how Dart has evolved and how to build Material Design user interfaces.
Stay tuned to see how I get on with Flutter development.
READ MORE ABOUT DEVELOPERS AND SOFTWARE DEVELOPMENT