Two weeks, use Flutter to build an APP

Preface

Flutter is a cross-platform solution launched by Google. Its slogan is “Design beautiful apps”. It is also used and promoted by well-known domestic companies, such as Alibaba and Meituan.

I am very interested in some of its features, such as JIT, Material Design, and rapid development, so I decided to give it a try.

Thus, the Poetry Vocabulary APP was born. Let’s first take a look at what kind of APP it is.

Next, let’s talk about the development of Flutter from different aspects step by step.

start

FLutter can be developed on Windows, Linux, and Mac. The development tools can be VS Code, Android Studio, IDEA, etc. This article recommends using Android Studio, mainly because Android Studio provides the FLutter Inspector tool, which can review elements in real time and solve interface display adaptation problems.

Build a development environment

The main steps to build the environment:

1. Download SDK, download address.
2. Configure PATH. If you use Mac or Linux system, be sure to add the bin directory to the system PATH.
3. Configure the dependent source image. This step is very important, and the script needs to be placed in the startup shell.

 export PUB_HOSTED_URL=https://pub.flutter-io.cn
 export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

1. Run flutter doctor. This step will take 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.

VS Code needs to install the flutter plug-in, 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 from VS Code are:

1. VS Code provides better code hinting
2. IDEA provides Flutter Inspector, which can review page elements in real time

You can choose to use it according to your personal preferences and habits.

Recommended Websites

During the installation and configuration process, you can refer to the following Chinese materials:

Flutter China

Flutter Chinese Documentation

Main technical points

Dart

The development language of the Flutter project is Dart, which is an object-oriented language developed by Google. It can be compiled into ARM and x86 codes and run directly on iOS and Android devices.

It is recommended to study the official Dart language tutorial first, and then study and develop Flutter after you have a preliminary understanding of Dart.

Interface development

Finally, we can move onto Flutter itself.

Widget

All elements on the page in Flutter are widgets, which are divided into StatelessWidget and StatefulWidget.

As the name implies, a StatelessWidget is a widget with no mutable state. The state of this type of widget is determined only by the parameters passed in when the widget is created. Once created, its state and display effect on the page will no longer change.

The StatefulWidget has mutable states inside. When these states are changed through setState, Flutter will re-render the Widget.

layout

In actual development, Row, Column, Container, Expanded, Stack, etc. are mainly used.

Row and Column provide horizontal and vertical layouts, and Stack provides a stacking layout. Various containers have different characteristics, and different layouts can be selected according to actual page requirements.

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

Main plugins

Let's get back to the Poetry App. This App has collected more than 300,000 poems from more than 4,000 poets, provides functions for searching, collecting, and reciting ancient poems, and has realized preliminary community functions.

The project directory structure is as follows:

It took me about one month of my spare time to develop this app. I spent one or two hours every day on it, which translates to about two weeks in working days. The development efficiency is still very high.

Let me share with you the main functions and some plug-ins used.

Switch Theme

In order to achieve real-time switching of theme colors, a state management plug-in is used.

flutter_redux .

Aurora Push

Among domestic manufacturers, Aurora is one of the few that provides technical support for Flutter. Here I would like to give a big thank you to Aurora.

jpush_flutter

QQ

The Flutter plug-in for QQ provides basic login and sharing functions.

flutter_qq

WeChat

The Flutter plug-in for WeChat provides slightly richer functions, including payment, login, sharing, and launching mini-programs.

fx

Event Bus

The famous 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 features such as loading HTML, Toast prompts, image selectors, image loading, etc. also have good plug-in support.

You can search for related plug-ins in the official plug-in library.

pit

Installation and Upgrade

The installation and upgrade of Flutter often encounter stuck problems. The main reason is that Google's source is used. However, inexplicably, even after using scientific Internet access and setting up domestic mirrors, the same problem will occur. The only way is to repeatedly run flutter doctor or flutter upgrade until the problem is solved.

Development

Since I have been working on a lot of Android projects recently, I am used to Android's XML layout method. At first, I was not used to the way of writing pages in code. However, after practicing several pages according to the official examples, the advantages of writing pages in code became apparent.

When the page has been designed, a Widget tree is conceived in the mind during development, nesting each node from the root node one level at a time, and the layout is naturally written.

Dialog pop-up box

When using Dialog, the Context that pops up the Dialog 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 both Android and iOS, which may be related to the design that all elements of Flutter are widgets.

Compile

When compiling the Android version, it was smooth and there were no problems. But when compiling the iOS version, there were many problems, which have not been solved until now.

The problem is that two plug-ins, audio_recorder and flutter_qq, are used. One of these two plug-ins requires the compilation option to be set! use_framework, while the other requires that it cannot be set, causing a conflict. In actual compilation, the compilation fails.

Conclusion

After the development was completed, the Release version of the APK was finally packaged and installed on the phone, and I found a surprise.

It is surprisingly smooth as silk, which is beyond my expectation. The transition effect and page response speed are not inferior to the native APP.

All in all, I am quite optimistic about the prospects of Flutter. After all, it is a product of Google, and the project itself is iterating very quickly. It is currently at version 0.11. I hope that the official version 1.0 will be released in the near future. I also hope that domestic manufacturers will increase their support for Flutter.