Mobile app developers often find themselves squeezed for resources. They want to produce great work, but they struggle to find the time and money. Given those constraints, many turn to cross-platform frameworks and development kits such as Flutter, which can allow them to build apps for multiple platforms in a relatively expedited way. Three years into its existence, it’s worth examining whether Flutter is living up to its initial promise.

Mobile developers face a dizzying array of tools and languages. Web and mobile development includes an overwhelming number of JavaScript frameworks such as Angular, Backbone, Electron, Ember, Vue, React, Node.js and others. For cross-platform mobile development, you have Xamarin Forms, React Native, Flutter, Ionic, Sencha and others to pick from. Plus, any mobile developer who keeps on the cutting edge needs to become as familiar as possible with Kotlin and Swift, which are being pushed by Google and Apple (respectively) as the mobile-development languages of the future. 

In theory, developing via cross-platform tools is a no-brainer. It saves you money by allowing you to only write code once and share it between platforms. How does it work in reality, though?

Looking Good

Websites and mobile apps have always had to look good, but with mobile, it takes a lot of hard work to create something with a polished sheen. Because Flutter was developed by Google, in comes with the search engine giant’s Material Design already integrated, including grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. That makes things nice and easy if you’re building Android apps; before Flutter, Java and Kotlin developers had to rely on third-party toolkits for Material Design (it wasn’t until Google released Android Jetpack in 2018 that Material Design was officially supported). 

You build Flutter apps via Widgets; it's like Lego for coding. Technically, Widgets are a class-based declarative system, but it's a much nicer system than, say, the XAML used in WPF and Xamarin Forms. You have Widgets for layout, navigation, animation, assets and more. Flutter also makes it very easy to style your app with Themes, letting you set colors, fonts and text styles throughout your application. 

That look and feel is in every Flutter Widget. Even iOS Flutter developers get Cupertino Widgets, styled to look like iOS native controls. If you’re feeling cheeky, you can use Cupertino Widgets on Android. It’s weird seeing an iOS aesthetic in an Android context, but it works!

Not Visual Design Tools

Flutter does require mobile app developers to grasp software-development best practices before they begin. That’s because when you first view the source code for Flutter, it’s often quite confusing; an app with many widgets can be hundreds of lines long in one block. IDEs such as Android Studio provide tools to manipulate Widgets, but these design tools aren't very visual; to see your design, you must run it in an emulator or on a smartphone. 

Third-party drag and drop design tools (such as flutterstudio) are helpful, but I view them as props to learning. In an ideal world, I’d love a drag-and-drop designer in Android Studio, similar to the one in Visual Basic, but I’m not holding my breath. Study your software development principles before utilizing a cross-platform framework, just as you would a “standalone” mobile app project. 

After a few days working with source code and the various tools within Flutter, you'll find it a speedy process to write code. Flutter’s “Hot Reload” feature is fantastic if you want to quickly experiment with different UIs and features, as well as fixing bugs. You can make code changes and see them live within a second or two in the emulator or a connected phone. Compared to earlier development with Xamarin and MonoGame, it feels like magic and leads to a “Tinkering Oriented Development” style. 

It's not all great though. The age-old problem of mixing code and declarations in the same file, first seen with HTML and PHP/ASP back twenty years ago, is back with a vengeance. Widgets and their properties are terminated by commas but code uses semi-colons. This is what a Widget (MyButton- one of my own Widget creations) looks like with code to login to Firebase: The first three lines are the Widget declaration with properties, while the rest is all code: 

  MyButton(
	title: 'Log In',
	color: Colors.lightBlueAccent,
	onPressed: () async {
	  setState(() {
		showSpinner = true;
	  });
	  try {
		final user = await _auth.signInWithEmailAndPassword(
			email: email, password: password);
		if (user != null) {
		  Navigator.pushNamed(context, ChatScreen.id);
		}
		setState(() {
		  showSpinner = false;
		});
	  } catch (e) {
		print(e);
	  }
	},
  ), // RoundedButton

I think the tooling is generally excellent in Android Studio. VSCode has the same approach, but Android Studio gives you more with Flutter Inspector and Flutter Outline tools. It also lets you see where Widgets stop and start in source code, with comments added automatically on closing braces and extensive color-coding in the editor. Errors show up quickly without needing compilation. On Mac, you also need XCode to deploy apps onto iOS devices with the usual certificates needed for deploying.

Dart Code

Flutter has an almost symbiotic relationship with Dart, but it's Dart-oriented at heart. All the source code files have Dart extensions, and you can have “pure” Dart files as well as files with Flutter and Dart. 

Dart has similar syntax to JavaScript, but comes with a proper OOP and type system and compiles to ARM code. This is what powers Flutter to run at 60 frames per second. Dart can also be transpiled to JavaScript.

Web-Powered

Version 2.0 of Flutter, released in 2021, lets you target the web using HTML (on mobile) or CanvasKit, which is the Skia graphics engine that compiles to WebAssembly. It’s probably the easiest way to create Single Page orProgressive Web Apps, but it doesn't do plain old web pages. Not all Widgets support the web, but you can see which do and don’t in the 17,000 packages in the official pub.dev repository. 

My Thoughts

Developers love Flutter. It simplifies and speeds up Android mobile development enormously, and you get iOS thrown in for free. GitHub now has almost a quarter million Flutter projects, including Flutter itself; not bad in just four years.

Although Google has a track record of dropping its projects, I don't believe this is likely as Flutter developed apps now number over 200,000 apps in the Play Store and they'll need it for the Fuchsia Operating System. Just keep an eye on how Apple regards apps developed via cross-platform tools; their app review process has been known to get a little pernickety sometimes about apps developed with Flutter.