preface

Flutter is a cross-platform solution launched by Google with its Slogan “Design Beautiful Apps”. Some well-known enterprises in China are also using and promoting Flutter, such as Alibaba and Meituan.

I was interested in some of the features, such as JIT, Material Design, rapid development, etc., so I decided to give it a try.

The poem words

So the Poem Vocabulary APP was born. First let’s see what kind of APP it is.

Let’s take a step-by-step look at the different aspects of Flutter development.

start

FLutter can be developed on Windows, Linux or Mac using VS Code, Android Studio, IDEA, etc. Android Studio is recommended. Android Studio provides the FLutter Inspector tool, which can review elements in real time to solve the problem of display adaptation of the interface.

Setting up the development environment

The main steps of setting up the environment:

  1. Download the SDK, download the address.
  2. Configure PATH. If you are using a Mac or Linux system, be sure to configure PATHbinThe directory is added to the system PATH.
  3. Configuring the dependent source image is important and requires putting the script in the startup shell.
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
Copy the code
  1. performflutter doctorThis step takes a long time and requires patience.
  2. Android development tools and plug-ins, configuration editor.

Configuration editor

The main thing is to install the corresponding plug-in for the editor. Android Studio and IDEA need to install the Flutter and Darter plug-ins. Android Studio is basically the same as IDEA, but the main differences with VS Code are:

  1. VS Code offers better Code hints
  2. IDEA provides the Flutter Inspector to review page elements in real time

Can choose to use according to personal preference, habit.

Recommendation site

During the installation and configuration process, refer to the following Documents: Flutter China Flutter Chinese document

Key Technical points

Dart

Dart is an object-oriented language developed by Google that can be compiled into ARM and x86 code to run directly on iOS and Android devices. It is recommended that you first learn the official Dart language tutorial to gain a preliminary understanding of Dart before learning and developing Flutter.

Interface development

Finally enter the Flutter itself.

Widget

All page elements in Flutter are widgets, divided into statelessWidgets and StatefulWidgets.

As the name implies, a StatelessWidget is an immutable Widget whose state is determined only by the parameters passed in when the Widget is created. Once created, its state and display on the page remain unchanged.

There is mutable state inside the StatefulWidget. When these states are changed via setState, Flutter re-renders the Widget.

layout

In actual development, Row, Column, Container, Expanded, Stack, and so on are mainly used.

Row and Column provide horizontal and vertical layout, and Stack provides Stack layout. Containers have different features. You can use different layout based on site requirements.

It is recommended to learn the Chinese translation of official documents and domestic maintenance.

The main plug-in

The topic is back to the Poem Vocabulary APP. The APP has collected more than 300,000 poems written by more than 4,000 poets, providing functions of querying, collecting and reciting ancient poems, and realizing preliminary community functions.

The project directory structure is as follows:

It took me about one month to develop this APP in my spare time, one or two hours every day, which is about two weeks if translated into working days. The development efficiency is still very high.

Here are some of the main features and some of the plug-ins used.

Switch the theme

In order to switch theme colors in real time, a state management plug-in is used. Flutter_redux.

The aurora push

Aurora is one of the few domestic manufacturers to provide technical support for Flutter. Here we give aurora a big 👍. jpush_flutter

QQ

QQ’s Flutter plugin provides basic login and sharing functions. flutter_qq

WeChat

Wechat’s Flutter plugin provides a slightly richer set of features, including the ability to pay, log in, share, and launch mini-apps. fluwx

Event Bus Event Bus

Event_bus also provides support for Flutter. event_bus

audio

There is also good support for recording and playing audio. audio_recorder audioplayer2

other

Other plug-ins such as loading HTML, Toast hints, image pickers, and image loading are also well supported. You can query related plug-ins in the official plug-in library.

pit

Installation and Upgrade

The main reason for this problem is the use of Google sources. But somehow, even after using the scientific Internet and setting up a domestic mirror, FLutter often encountered the same problem. Only by repeatedly flutter doctor or flutter upgrade until the problem is resolved.

The development of

As the author has done a lot of Android projects recently and got used to Android’S XML layout, I was not used to writing pages in code at the beginning. However, after practicing several pages according to official examples, the advantages of writing pages in code came out.

With the page already designed, you should have a Widget tree in mind at the time of development, nested level by level from the root node to each node, and the layout should be written naturally.

Popup Dialog

When a Dialog is used, both the pop-up Dialog Context and the Dialog itself are pushed into the stack, so the method to make the Dialog disappear is navigator.of (CTX).pop(). This design is different from Android and iOS. Perhaps this has something to do with the fact that all elements of the Flutter itself are widgets.

compile

Compiling the Android version went smoothly without any problems. However, when compiling the iOS version, we encountered a lot of problems that are still unresolved. The problem is the use of audio_Recorder and Flutter_QQ plugins, and one of these plugins requires compilation options to be set! Use_framework, a requirement that could not be set, caused a conflict and never passed the actual compilation.

conclusion

After the development, I packaged the Release version of APK and installed it on the mobile phone, and found a surprise.

It was silky and smooth, which I had never expected. The transition effect and the corresponding speed of the page were as good as that of the original APP.

All in all, I am very optimistic about the future of Flutter. After all, Flutter is a big product of Google, and the project itself is undergoing rapid iteration. Currently, it is version 0.11, and WE expect to release the official version 1.0 in the near future.

By the way, I would like to promote the author’s poem vocabulary APP, welcome everyoneDownload the trial, or visitThe poem wordsExperience the silky smoothness of the Flutter. ^_^