Google’s Cross-Platform Mobile UI Framework Flutter Now in Beta

| by Sergio De Simone Follow 7 Followers on Mar 02, 2018. Estimated reading time: 2 minutes |

A note to our readers: You asked so we have developed a set of features that allow you to reduce the noise: you can get email and web notifications for topics you are interested in. Learn more about our new features.

Flutter, now in beta, is Google's attempt to create a framework for cross-platform interfaces for both iOS and Android apps that behave and feel like native, although not standard, UIs.

Flutter supports a reactive-style approach to UI definition, similar to React Native. What sets it apart from other cross-platform Web view-based frameworks is its reliance on Dart to avoid the need for a JavaScript bridge between the UI and the native services provided by the OS platform. This includes, for example, location services, sensor access, camera, etc. By using Dart, which is compiled ahead-of-time into native code, Flutter does not pay the cost of context switching due to the JavaScript bridge.

Cross-platform frameworks that aim to provide a native UI look and feel also use natively-implemented widgets to represent buttons, tables, etc. This also usually requires different parts of an app to communicate using the JavaScript bridge, which tends to be slow. To circumvent this, Flutter provides its own collection of widgets and draws them directly on the canvas provided by the OS platform. Another advantage associated to this approach is how Dart lays out the UI. Contrary to CSS boxing model, Android Layouts, or iOS constraints, which aim to provide abstractions to describe any possible way of laying out UI elements on screen, each Flutter widget has its own simplified layout model. Bringing this to an extreme, to center a widget, you put it inside of a Center widget. Similarly, to include some padding around it, you include it in a Padding widget. The following is a simple example of a centered box including a label and an icon that are stacked vertically:

new Center(
  child: new Column(
    children: [
      new Text('Hello, World!')),
      new Icon(, color:

Whole themes and navigation are represented by widgets in Flutter, so you can change how your UI looks like or the way you navigate through its different views by using a different parent widget.

Since Flutter alpha, Google has worked on better tool integration, with support for Android Studio and Visual Studio Code, better platform interoperability, better hot reloading, and a widget inspector for the widget tree.

Since Flutter uses Dart, a key factor in driving its adoption will be the availability of third-party packages that allow developers to reuse code without having to code everything from scratch. This includes things like making network requests, navigation handling, as well as using external SDKs like Firebase’s, SQLite, Facebook Connect, etc. You can check the catalog of packages available for Flutter, which includes more than 1000 packages, to make sure you have everything you need.

Moving forward towards 1.0, Google says development will focus on stabilization and adding support for more scenarios, such as making it easier to embed Flutter into an existing app, using inline WebViews, etc.

If you want to try out Flutter beta, just follow the installation instructions. In addition, make sure to give a look at the Flutter Gallery, the Posse Gallery, and this list of useful links.

Rate this Article

Adoption Stage

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread


Login to InfoQ to interact with what matters most to you.

Recover your password...


Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.


More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.


Stay up-to-date

Set up your notifications and don't miss out on content that matters to you