BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

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

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

Leia em Português

This item in japanese

Bookmarks

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(Icons.star, color: Colors.green)
    ]
  )
)

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
Style

BT