Shulou(Shulou.com)06/02 Report--

This article mainly explains "what is the development method of Flutter". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the development method of Flutter".

Start

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

Build a development environment

The main steps to build the environment:

Download SDK, download address.

Configure PATH, and if you are using Mac or Linux systems, be sure to add the bin directory to the system PATH.

The configuration depends on the source image, which is important, and you need to put 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

To execute flutter doctor, this step will take a long time and requires patience.

Android development tools and plug-ins, configuration editor.

Configuration Editor

The main purpose is to install the corresponding plug-ins for the editor.

VS Code installs the flutter plug-in, while 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 as follows:

VS Code provides better code hints

IDEA provides Flutter Inspector to review page elements in real time

Can be used according to personal preferences and habits.

Recommended website

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

Flutter China

Flutter Chinese documents

Main technical points

Dart

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

It is recommended to study the official Dart language tutorials first, and then learn and develop Flutter after having a preliminary understanding of Dart.

Interface development

You can finally get into Flutter itself.

Widget

All the elements of the page in Flutter are Widget, which is divided into StatelessWidget and StatefulWidget.

As the name implies, StatelessWidget refers to a Widget with no changeable state. The state of this kind of Widget is only determined by the parameters passed when the Widget is created. Once created, its status and display effect on the page will no longer change.

On the other hand, there is a variable state inside StatefulWidget. When you change these states through setState, Flutter renders the Widget again.

Overall Arrangement

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

Row and Column provide horizontal and vertical layouts, while Stack provides stacked layouts. Various containers have different characteristics, and you can choose different layouts according to the actual page needs.

It is recommended to learn official documents and Chinese translation maintained in China.

Main plug-in

Turning to Poetry Collection APP, this APP collects more than 300,000 poems by more than 4000 poets, provides the functions of inquiry, collection and recitation of ancient poetry, and realizes the preliminary community function.

The project directory structure is as follows:

It took about a month of spare time to develop this APP, setting aside an hour or two every day, which translates into a working day, about two weeks, and the development efficiency is still very high.

Let's share with you the main features and some plug-ins used.

Switch topics

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

Flutter_redux .

Auroral push

In the domestic manufacturers, the aurora is rare to provide technical support for Flutter, here to the aurora big.

Jpush_flutter

QQ

QQ's Flutter plug-in provides basic login and sharing functions.

Flutter_qq

WeChat

Wechat's Flutter plug-in provides slightly more functions, including paying, logging in, sharing and launching Mini Program.

Fluwx

Event bus Event Bus

The famous event_bus also provides support for Flutter.

Event_bus

Audio frequency

There is also good support for recording and playing audio.

Audio_recorder audioplayer2

Other

Other plug-ins such as loading HTML, Toast prompt, picture selector, picture loading and so on also have good plug-in support.

You can query the relevant plug-ins in the official plug-in library.

Pit

Install, upgrade

Jams are often encountered in the installation and upgrade of FLutter, mainly due to the use of Google sources, but inexplicably, even after using scientific Internet access and setting up domestic images, you will encounter the same problem. Only through repeated flutter doctor or flutter upgrade until the problem is solved.

Development

As the author of the recent period of time to do more Android project, accustomed to the XML layout of Android, for the form of writing pages in the code is not accustomed to at first, but in accordance with the official example of the practice of a few pages, the advantage of writing pages with code is reflected.

In the case that the page has been designed, a Widget tree is conceived in mind during development, nesting from the root node to each node, 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 way to make Dialog disappear is Navigator.of (ctx). Pop (), this design is different from both Android and iOS, and may have something to do with the design in which all the elements of Flutter itself are Widget.

Compile

It was smooth to compile the Android version without any problems. However, when compiling the iOS version, I encountered a lot of problems, which have not been solved until now.

The problem is that two plug-ins, audio_recorder and flutter_qq, are used, and one of these plug-ins requires that the compilation option needs to be set! use_framework, while the other cannot be set, which causes a conflict and fails in the actual compilation.

Thank you for your reading, the above is the content of "what is the development method of Flutter". After the study of this article, I believe you have a deeper understanding of what the development method of Flutter is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.