Due to the differences between Android and ios, it is not easy to develop cross-platform apps. Current solutions on the market, such as React Native, WebView-based Cordova and AppCan, fail to meet functional and performance requirements. It was not until last year when I heard about Flutter, a cross-platform UI framework officially launched by Google, that I was curious to write a demo and found it very useful. Compared with the original app development process, it saves a lot of tedious initial configuration and the packaging of some tools. Because Flutter has taken these problems into account, To enable you to focus on the UI and logic business development, this study note will provide an overview of Flutter, its simple principles, and compare the advantages and disadvantages of other cross-platform solutions.

What is a Flutter? Why did Google launch it

Simple said is Google to a set of code to run two systems (IOS and Android) and launched a thing, can greatly save development and maintenance costs, in fact more than mobile terminal, this year’s developer conference and announced support for the front and the desktop, and the future of the Internet of things devices, currently use Flutter representatives have alibaba idle fish, First look at the official framework of Flutter

The Framework layer runs on the Flutter Engine, which is the independent virtual machine of Flutter, providing adaptation and cross-platform. Therefore, Flutter does not use native controls of mobile systems. Instead, Flutter uses its own Engine to draw widgets (the display unit of Flutter).

A few of them are important

Dart: Flutter development language, which is also Google’s own…. The Framework layer is written entirely by Dart. There are Material and Cupertino UI styles corresponding to Android and iOS

Skia: This is Google’s own 2D graphics library, which is at the heart of their Chrome browser, Engine

Widgets: The display unit of a Flutter. “Everything is a Widget” is the idea of a Flutter. The componentization of the front end is similar to that of the native controls

What are the advantages of Flutter

High performance, a few blocks away from the cross-platform solutions currently on the market

Fluttr compares RN, which uses front-end code to write UI and then generates native code from the framework, with an extra layer of bridging

And the idea of Flutter is that,

  • UI only uses the native drawing interface, based on the image engine to draw UI directly, and this drawing process is the Skia mentioned above.
  • The Flutter engine is written in C++ with low latency inputs and high frame rates,
  • Compile to native code using the Dart language AOT, with some efficiency bonus

Go straight to code

The syntax is pretty much the same. Take a look at the language style. First impression: It looks like a front-end, full of components

class _SampleAppPageState extends State<SampleAppPage> {
  // Default placeholder text
  String textToShow = "I Like Flutter";

  void _updateText() {
    setState(() {
      // update the text
      textToShow = "Flutter is Awesome!";
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Sample App"),
      ),
      body: Center(child: Text(textToShow)),
      floatingActionButton: FloatingActionButton(
        onPressed: _updateText,
        tooltip: 'Update Text',
        child: Icon(Icons.update),
      ),
    );
  }
}
Copy the code

The code above is an interface of App, isn’t it very simple? For Android, you need to register an Activity first, then write an Activity and an XML layout code, and the Flutter can be handled by a class

Here is a simple Widget that can be combined with other widgets to form a new Widget

import 'package:flutter/material.dart'; class MyAppBar extends StatelessWidget { MyAppBar({this.title}); // Fields in Widget subclasses are always defined as "final" final Widget title; @override Widget build(BuildContext context) { return new Container( height: Symmetric (horizontal: 8.0), decoration: symmetric(horizontal: 8.0), symmetric(horizontal: 8.0), decoration: symmetric(horizontal: 8.0) New BoxDecoration(color: color.blue [500]), // Row is a horizontal linear layout child: New Row(// The list item type is <Widget> children: <Widget>[new IconButton(icon: new icon (Icons. Menu)), tooltip: 'Navigation menu', onPressed: // Expanded its child to fill the available space. New Expanded(child: title, ), new IconButton( icon: new Icon(Icons.search), tooltip: 'Search', onPressed: null, ), ], ), ); }} Class MyScaffold extends StatelessWidget {@override Widget build(BuildContext context) {// Material is a "piece of paper" Return new Material(// Column is vertical linear layout. Child: new Column(children: <Widget>[new MyAppBar(title: new Text( 'Example title', style: Theme.of(context).primaryTextTheme.title, ), ), new Expanded( child: new Center( child: new Text('Hello, world!'), ), ), ], ), ); } } void main() { runApp(new MaterialApp( title: 'My app', // used by the OS task switcher home: new MyScaffold(), )); }Copy the code

Often need to monitor life cycle events in the Android, and can be used to hang in the Flutter received WidgetsBinding observe and monitor didChangeAppLifecycleState change events to monitor life cycle events, a total of four kinds of condition

  • Resumed – The application is visible and responds to user input. This is onResume from Android
  • Inactive – The application is inactive and does not receive user input. This event is not used on Android and only works on iOS
  • Paused – The application is currently invisible to the user, does not respond to user input, and runs in the background. This is a pause from Android
  • Suspending – The app will be suspended for a while. This is not used on iOS

You can see the integration of the Android and IOS life cycles, but there are still many fewer events than native ones.

It should also be noted that Android fragments do not exist in Flutter.

In Android, an Activity represents a key task that a user can accomplish. Fragment represents a way of modularizing code to build more complex user interfaces for large-screen devices, automatically adjusting the UI between small and large screens. In Flutter, both concepts are equivalent to widgets.

Then in the learning process, I also found some other problems, such as some hardware support, access camera, map API is not perfect, but there are many plug-ins to choose from, but after all, it is a new system, still not mature, the whole industry ecology has not been established.

Once again, I would like to tell you my opinion about Flutter. I heard about Google’s new system Fuchsia when I was learning Flutter. Later, I checked some materials and found that Fuchsia has authorized Flutter and Dart as its official development platform and language. Fuchsia is Google’s next Android (due to Android’s fragmentation, cross-platform unfriendly, JVM performance issues, Java not being its own language, etc.) I think the reason Why Google is pushing Flutter at this stage is because they want developers to use Flutter and DART for mobile applications, to build their own ecosystem, and to strengthen their technological bastions. By the time Fuchsia comes out, existing Flutter applications will run directly on the new system, making it somewhat “compatible” with Android. Therefore, I think Flutter’s current development prospects are good, even if it is purely a cross-platform UI solution.