Introduction to Flutter (content fromBecause Chinese website)

What is the Flutter

Flutter is Google’s mobile UI framework for quickly building high-quality native user interfaces on iOS and Android. Flutter can work with existing code. Flutter is being used by more and more developers and organizations around the world, and Flutter is completely free and open source.

The characteristics of Flutter

Rapid development of

Milliseconds of hot overloading, after modification, your application interface will be updated immediately. Build native interfaces in minutes with rich, fully customizable widgets.

The thermal overload of Flutter helps you test quickly, build UI, add features, and fix bugs faster. On iOS and Android emulators or real phones you can reload in subseconds without losing state

Expressive and flexible UI

Quickly release features that focus on the native experience. The layered architecture allows you to fully customize, enabling incredibly fast rendering and expressive, flexible design.

Create a new experience for your users with the beautiful Material Design and Cupertino (ios-style) widgets, rich Motion apis, smooth and natural sliding effects and platform awareness built into Flutter.

The original performance

Flutter contains a number of core widgets, such as scrolling, navigation, ICONS and fonts, that can perform as well as native apps on iOS and Android.

Make your app powerful and easy to use with platform-specific apis, third-party SDKS, and native code. Flutter allows you to reuse existing Java, Swift, or ObjC code, access native system features and system SDKS on iOS and Android.

Build the Flutter development environment under Window

On Flutter Chinese website, there is a detailed tutorial about how to build a development environment. Here I hope to make it easier to build a development environment by interweaving some pictures. If you want to do something well, you must first build your development environment.

The installationGit

You need to install Git as the download tool for the Flutter SDK.

Download FlutterSDK

Use the following command to download the FlutterSDK

git clone -b beta https://github.com/flutter/flutter.git
Copy the code

If you don’t download it for a long time or the connection fails, set these two environment variables first. This is a temporary mirror set up by Google for domestic developers.

set PUB_HOSTED_URL=https://pub.flutter-io.cn
set FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
Copy the code

To run the flutter command on a terminal, you need to add the following environment variables to the system PATH:

set PATH=`pwd`/flutter/bin:$PATH
Copy the code

Manually configure environment variables

  • Go to control Panel > User Accounts > User Accounts > Change My Environment Variables
  • Check for an entry named “Path” under “User Variables” :
    • Append the full path of flutter\bin if the entry exists, use the. As a separator.
    • If the entry does not exist, create a new user variable Path and then take the full Path of flutter\bin as its value.
  • Under “User Variables” check for entries named “PUB_HOSTED_URL” and “FLUTTER_STORAGE_BASE_URL”, if not, you can add them.

To test whether the flutter environment variables are configured successfully, enter the flutter command in the terminal and press Enter. If the message indicating the use of the flutter command is displayed, the flutter environment variables are configured successfully, as shown in the following figure:

Run the flutter doctor

Switch to the path where flutterSDK resides to detect the dependencies required by the current flutter and download the dependencies

C:\Users\XX\flutter\bin> flutter doctor
Copy the code

The first time a flutter command (such as a flutter Doctor) is run, it downloads its own dependencies and compiles them. It will run much faster later.

Some Android licenses are not accepted. To resolve this problem, run flutter Doctor — Android license

Configuration editor

Android Studio installation

Android Studio: Provides a complete IDE experience for Flutter

  • Please install Android Studio3.0 or higher.

IntellJ IDE installation

  • IntelliJ IDEA Community, version 2017.1 or later.
  • IntelliJ IDEA Ultimate, Version 2017.1 or later.

Install the Flutter and Dart plug-ins

  • The Flutter plugin supports the Flutter development workflow (running, debugging, thermal reloading, etc.).
  • Dart plug-in: Provides code analysis (validation as code is entered, code completion, and so on).

Android Studio: Open the Plugins Preferences (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux), Select Browse repositories… Select the Flutter/Dart plugin and click Install. The plug-in takes effect after you restart Android Studio.

IntellJ IDEA : IntelliJ IDE>setting>Plugins

Creating a new application

After Android Studio restarts to open Flutter Project choose File>New Flutter Project

Next the package name, SDK address is not explained, and finally finish, waiting for Android Studio to create the project.

Run the application

  • Navigate to the Android Studio toolbar:
  • In target Selector, select an Android device running the application. If not listed, choose Tools>Android>AVD Manager and create one there
  • Click the Run icon in the toolbar
  • If everything works well, the result is shown below