Recently, I learned some knowledge about Flutter and made the following small mobile application. Of course, it is a set of code that can run on iOS and Android.

Details of this article can be found on my blog: H.lishaoy.net.

Next, I will take you hand in hand to quickly build a beautiful mobile application interface (see the following 👇 video).

First Flutter

Flutter is Google’s mobile UI framework for quickly building high-quality native user interfaces on iOS and Android.

It’s been three years since Google launched the Flutter mobile application framework, It wasn’t until this year’s Google I/O Developer Conference that Flutter was officially introduced and a Beta version was released. This video on Flutter is from the Google I/O Developer Conference on YouTube. Please watch for yourself.

Speed up your first awareness of Flutter by watching more vivid video introduction

Google’s advertising App Adwords and Alibaba’s Xianyu App are all based on the Flutter framework.

The following is a video of alibaba building a Flutter Developer Story with more than 50 million users

Flutter, Google’s cross-platform development framework, has attracted a lot of attention since its launch, earning more than 40 million stars on GitHub.

This is a video released by Google China on Bilibili, please watch it yourself.

Flutter characteristics

Now that we have learned something about Flutter from the video above, let’s look at the following properties of Flutter

Thermal overload

When you modify the code ⌘ -s, you can see the effect immediately and allow the interface state to remain unchanged (e.g. the input to the text box will not change), as shown in the following figure:

Hot reload

design

Flutter comes with a Google-promoted Design system called Material Design, which provides rich Material Design-style components (e.g. Button, input box, dialog box, navigation bar, sidebar, etc.), and also provides a variety of iOS (Cupertino) style components, which can be used to quickly build applications, as shown in the figure

Material Design

widget

Widgets are the basic building blocks of Flutter applications. Flutter uses neither WebView nor native controls of the operating system. Instead, Flutter uses its own high-performance rendering engine to draw widgets. The central idea of Flutter is to build your UI with widgets (everything is a widget).

widget

In this architecture, you can implement all of the ready-to-use widgets that Flutter provides, as well as create your own custom widgets. Each widget is open to the public. You can get the development efficiency advantage from the high level and uniform widgets that Flutter provides. The goal is to do more with less code.

language

Flutter is built using C, C ++, Dart and Skia (2D rendering engine) technologies, as shown above. The underlying engine is C ++, the framework is Dart, and of course we are developing WITH Dart.

Dart is a structured Web programming language released by Google that is efficient, concise and has a complete type system. The official reason for choosing Dart as the development language is as follows

  • Developer productivity
  • object-oriented
  • Predictable, high performance
  • Fast memory allocation

For developers (language users), Dart is similar to Java and JavaScript in that it has some programming language basics to work with (look vaguely at syntax, keywords, types).

Now that you have an understanding of Flutter, you will be able to speed up the application of Flutter, hand in hand, in a few pages.