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

This article is about how to install and use Flutter. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Preface

Flutter has been out for some days, and more and more developers have begun to try to use Flutter for development. Flutter is Google's mobile UI framework, which is based on Dart language and supports multi-terminal development (Android, iOS, Web). If you want to try it here, as the editor is also stepping on the road, please give me some advice on what is wrong.

Official website

The official website is the best way to learn any language. although most of them are in English, Google now has many Chinese versions:

Flutter Chinese official website: https://flutterchina.club/

Installation

Installation directly according to the official website to go, the most important thing is to configure the environment variables, download the flutter package you can understand as java in the jar package, development needs to import.

Characteristics

1. Widget (equivalent to View in Android)

As we all know, in Android, a page is made up of many View. In Flutter, Widget is used to form the content on the page, but unlike View, Widget is immutable, and some people may have doubts. Immutable is not a static page, yes or no, then there must be another way to move on:

1.1.The widget StatelessWidget with immutable state

You can think of StatelessWidget as a ViewGroup in Android, which is a stateless widget. What do you mean, that is, when your page part does not depend on anything other than object configuration information, in short, your page is static, you can use it.

1.2.The changeable state widget StatefulWidget

Like StatelessWidget, it can be understood as ViewGroup, but it is stateful, which is similar to the lifecycle of Activity, and you need to use it when your page needs to change dynamically.

Be careful

If a Widget changes (the user interacts with it), it is stateful; if a child Widget is stateful, the parent Widget that wraps it can be stateless or stateless, in short, StatelessWidget can contain StatefulWidget, and StatefulWidget can also contain StatelessWidget.

2. Is there any corresponding to the four components in Android?

In addition to the page, the other certainly not, because after all is a cross-end development framework, not specifically designed for Android, some people may want to ask, then if you want to achieve some special functions in Android is not impossible, not also, this belongs to another knowledge, sell a pass first, and then look down; Activity and Fragment in Flutter have become Widget.

3. Resource file 3.1, resource picture

There are many resolutions for resource images in Android. Flutter follows three simple resolution formats like iOS: 1x, 2x, 3x. Create an images folder in the root directory, and then create three folders in the images folder to store images of different resolutions:

.. / icon.png

.. / 2.0x/icon.png

.. / 3.0x/icon.png

Then, you need to configure these images in pubspec.yaml, which is equivalent to the gradle file in Android.

3.2, string

In Flutter, the best thing to do now is to create a new class that declares the string you need.

Disclaimer: class Strings {static String welcomeMessage = "Welcome To Flutter";} use: new Text (Strings.welcomeMessage); 4. Life cycle

In Flutter, StatelessWidget has no lifecycle, but only StatefulWidget. We generally listen to lifecycle events by connecting to WidgetsBinding to observe and listen to didChangeAppLifecycleState change events. These lifecycles are as follows:

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 applies to iOS

Paused-the application is currently invisible to the user, does not respond to user input, and runs in the background. This is onPause from Android.

Suspending-the application will be temporarily suspended. This is not used on iOS

5. Asynchronous UI

Dart is a single-threaded execution model that supports Isolates (the way Dart code is run on another thread), event loops, and asynchronous programming. Unless you start an Isolate, your Dart code runs in the main UI thread and is driven by an event loop.

When you make a network request, you can run the network request code directly in the UI thread:

LoadData () async {String dataURL = "https://jsonplaceholder.typicode.com/posts"; http.Response response = await http.get (dataURL); setState (() {widgets = JSON.decode (response.body);});}

Here we use async/await syntax to call API, you can understand that after using async, this method becomes asynchronous, and then you need to wait for (await) the network request to complete before executing the following update statement; in StatefulWidget, we use the setState method to update the UI operation, which re-executes the build method.

Thank you for reading! This is the end of the article on "how to install and use Flutter". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.