preface

Flutter is a cross-platform, high-fidelity, high-performance mobile development framework developed by Google and open source. Dart allows developers to develop apps using the Dart language, a set of code that runs on both iOS and Android.

In December 2018, Google released Flutter 1.0. Since then, Flutter has risen rapidly and secured its position in the market.

Today, Flutter resources and communities have matured and gained the trust of many developers and businesses. In addition, because of the company’s business expansion, it is necessary to learn Flutter development project, so let’s follow my steps to learn Flutter

I. Build up the Flutter development environment

Note: This article uses macOS as an example

1) Use mirrors

Because domestic access to Flutter may sometimes be restricted, Flutter officials have set up temporary images for Chinese developers. All we need to do is configure the following environment variables into the user’s environment variables:

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

2) download Flutter SDK

There are 2 ways:

1. Go to the Flutter website to download the latest installation package

Download address: docs. Flutter. Dev/development…

2. Download git Clone

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

This command clones the repository and switches it to the master branch

Note: the first of the above two methods requires decompression, and the second does not, just put them where you want to put them

3) Configure the Flutter environment variables

Configure the Flutter environment variables to your user environment. Here is my personal example:

# Flutter environment variablesexport FLUTTER_HOME=/Users/zhouying/Library/flutter
export PATH=${PATH}:${FLUTTER_HOME}/bin
Copy the code

4) Verify that the Flutter is installed successfully

Check with the Flutter Doctor to see if other dependencies need to be installed to complete the installation. This process may take a while the first time, but will be much faster the next time

From the above diagnostic information, we can see:

1. The Flutter version and channel number are OK

2. Android toolchain required for Flutter to run is ok

3. The iOS development environment required by Flutter is not ok

4, and Chrome is ok

5, AndroidStudio ok

6. Connected device ok

7. HTTP host availability ok

5) Some additional commonly used Flutter commands

1. View the help required for installing a FLUTTER by using a flutter –help

2. Run the flutter –version command to view the flutter version

3. View available devices using Flutter Devices

4. Start your application with the Flutter Run

Second, platform setting

Note: This is about Android

Install and configure your Android Studio

1. Download and install Android Studio.

Note: Android Studio requires 3.0 or higher

2. Start Android Studio and then run the Android Studio Installation wizard. This will install the latest Android SDK, Android SDK platform tools and Android SDK build tools. This is required when Flutter is developed for Android

2) Set up your Android device

Note: Android devices require Android 4.1 (API Level 16) or higher

1, the real machine

1. Enable developer options and USB debugging on your device

2. Plug your phone into your computer using USB. If your device appears, authorize your computer to access your device

3. In the terminal, run the Flutter Devices command to verify that the flutter identifies your connected Android device

Run and start your application, Flutter Run

2. Simulator

1. Enable VM Acceleration on your machine

2. Start Android Studio>Tools>Android>AVD Manager and select Create Virtual Device

3. Select a device and select Next

4. Select one or more system images for the version of Android you want to emulate, and then select Next. X86 or x86_64 image is recommended

5. Under Emulated Performance, select Hardware-gles 2.0 to enable Hardware acceleration

6. Verify that the AVD configuration is correct and select Finish

7. In Android Virtual Device Manager, click Run on the toolbar. The emulator starts and displays a splash screen for the selected operating system version or device.

Run Flutter Run to start your device. The connected device name is Android SDK built for , where platform is the chip family, such as x86

Install the Flutter and DART plugin on AndroidStudio

  • FlutterPlugin: Supports Flutter development workflow (run, debug, hot reload, etc.)
  • DartPlugins: provide code analysis (validation as input, code completion, etc.)

To install these:

  1. Start the Android Studio
  2. Open the plug-in Preferences > Plugins
  3. chooseBrowse the repositories…Select the Flutter plugin and clickinstall
  4. The plug-in takes effect after you restart Android Studio

Note: Dart plugin is automatically installed when you install the Flutter plugin

Create and run your first Flutter application

1) Create a new app

1, Select File > New Flutter Project

2. Select Flutter as the Project type and click Next

3. Enter a project name (for example, MyApp) and click Next

Note: The Project name letters must all be lowercase, otherwise you will be prompted not to create the application

4. Click Finish

5. Wait for Android Studio to install the SDK and create the project

2) Analysis of Flutter engineering structure

The following figure shows the engineering structure of the Flutter project we created:

Here’s a quick explanation:

file describe
myapp Project Name
.dart_tool Dart tool development configuration
.idea Configuration of the Flutter development environment
android Android platform related code
ios IOS platform related code
lib Cross-platform code is also a major concern of the Flutter project
test Test related code
.gitignore Git commit repositories ignore files
.metadata A configuration record of the current project
.packages The absolute path to the file ending in lib
analysis_options.yaml Static analysis file
myapp.iml Local path configuration for project files
pubspec.lock The current project depends on the generated file
pubspec.yaml The project description file, which contains the description of the project and the required dependent libraries
README.md Project Description
External Libraries Android development kits, resource files, Dart SDK files, engineering development dependency plugin apis, and more
Scratches and Consoles List of temporary files and buffers created

3) Run the application

1. Navigate to the Android Studio toolbar and select the Android device on which the app is running

2. Run your application by clicking the Run icon ** in the toolbar or calling the menu item Run > Run or using the flutter Run command

3. If all is well, you should see the app launch on your device or emulator:

4) Experience thermal reloading

Flutter can be quickly previewed using hot reload, which means that the modified code can be loaded in real time without reloading the application without losing state (this is the same as WebPack’s hot reload). Simply make a change to the code, then tell the IDE or command-line tool that you need to reload (click the Reload button) and you’ll see the change on your device or emulator

1, pushed the button this many times:’ You have clicked on the button this many times:’

2, Do not press the Stop button, let your application continue to run

3. To see your changes, simply call Command + S or hit the hot reload button (the one with the lightning ⚡️ icon)

Four,

Some highlights of this article:

1. Build up the Flutter development environment

2. Related Settings of Flutter on Android platform

Create and run your first Flutter project, Flutter engineering structure analysis

Well, this article is over here, I hope to bring you help 🤝

Thank you for reading this article

The next trailer

Because Flutter is developed based on the Dart language, I will cover the Dart language in the next article. Stay tuned to 😄

References and recommendations

Official Documentation of Flutter

“Flutter Practice · 2nd Edition” – Preview

Full text here, the original is not easy, welcome to like, collect, comment and forward, your recognition is the power of my creation

Please follow my public account and search sweetying on wechat. Updates will be received as soon as possible