Know what Flutter is

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

Learn a framework, as usual , look at the document: Flutter Chinese website / Flutter English official website

Flutter ecology

github address: https://github.com/Solido/awesome-flutter
showcase：https://flutter.dev/showcase
Windows is affordable, but iOS cannot be developed;
Mac is expensive and can develop iOS and Android at the same time;

Flutter development environment to build windows version

It is impossible to pretend that you don’t know how to surf the Internet! !

Install the Java environment: https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html ;
I downloaded Java 8 here:
After the installation is complete, right-click "My Computer", click "Properties", and select "Advanced System Settings";
Select the "Advanced" tab and click "Environmental Variables";
Set 2 attributes in "System Variables", JAVA_HOME, CLASSPATH (the case does not matter), click "New";

Note: If you use JDK version 1.5 or higher, you can compile and run Java programs normally without setting the CLASSPATH environment variable.

Create a new "PATH" variable name in "User Variables", the variable value is: %JAVA_HOME%\bin; (It is the bin directory of jdk, remember that there is a ";" after it)

After the above three steps are done, click the "Environment Variables" and "OK" after using the shortcut "Ctrl + R" pull "cmd" followed by the command line input java -version, , javaifjavac the following message appears on the configuration was successful, and if that does not work , You can only repeat the above operations and reconfigure again:

The shortcut key win + R opens the cmd command line, enter java, if the following figure shows, the installation is successful:
Download and install FlutterSDK: https://flutter.io/sdk-archive/#windows
After downloading, unzip the compressed package, find the file as shown below, double-click to open it:
you will get the following interface:

input flutter -h:

In this step, a VPN may not work well sometimes. At this time, you can consider using a domestic mirror:
Steps:

Computer->Properties->Advanced System Settings->Environment Variables, add the following two under User Variables:
① PUB_HOSTED_URL: https://pub.flutter-io.cn
② FLUTTER_STORAGE_BASE_URL: https://storage.flutter-io. cn

Restart the computer;

Clear flutter SDK -> bin directory -> cache;

win + R enter cmd to open the command line and enter again flutter -h;

If the fourth step does not work, enter cmd in win + R to open the command line, enter flutter doctor, it is said that it will automatically upgrade (not tried

Configuration path:

Create a new path, copy the path of the bin folder in the flutter folder, and finally win + R to open the cmd command line and enter it flutter -h. If it is consistent with the previous display, the configuration is successful;
win + R to open the cmd command line input flutter doctorconfiguration, diagnostics environment better, and usually ×do not work properly:
Download and install Android Studio ;

For specific steps, please refer to the rookie tutorial ;

Install the flutter plug-in on Android Studio:

restart after installation, you will find an extra line (as shown below):
At this time, then win + R cmd to open the command line, type flutter doctor:

a visual cue that we certificate is not installed, and gave us the command line to install the certificate, we follow the input flutter doctor --android-licensescan be:

When you install it will ask you many questions, all ythat will be enough ；
Enter again at this time flutter doctor, and you will find the last exclamation point: the

reason is that the virtual machine has not been installed;
In the next step, we first build a flutter project:

then I am stuck directly, and I don’t know why, so I decided to win + R to open the cmd command line, enter flutter create 项目名:

then enter Android Studio to open the project manually:

and then this step is too Slow, let me add two proxy URLs to my user variables:

FLUTTER_STORAGE_BASE_URL：https://storage.flutter-io.cn
PUB_HOSTED_URL: https://pub.flutter-io.cn
Then I felt that the speed was not good, and I went online for another wave of science, and it was finally possible!

The next step is to install the AVD virtual machine:

Click on the latest version to download: After the

download is complete, click Run: When

the virtual machine is turned on for the first time, it may pop up:

Solution: Often an error is reported because the SDK is not selected.
Click [File]-[Project Structure]-[Project SDK], and fill in the SDK path correctly.

After opening the virtual machine, type flutter doctor in the terminal:

you will find that all the tick boxes are marked!
After opening the virtual machine, click Debug:

Then I failed : I

checked it seems to be because the gradle version is too low, I will try to update it:

Then after a whole wave, it probably means that the minimum supported version must be at least gradle 6.5, and then I ran up and down again:

I looked at the gradle official website and found that the version was 6.7.1, which was high and stable, and that was it. After a download, I found the gradle folder in the computer. The path is probably: C:\Users\86135.gradle\wrapper\dists, everyone is similar, you can refer to

there are probably so many versions, but the previous ones are automatically downloaded before, I have not manually installed them, each There is a fixed garbled directory under the version of the gradle file directory:

the source code of this garbled extraction is below:

you can modify the version you want to install to get it:

package com.java.test1;

import java.math.BigInteger;
import java.security.MessageDigest;

public class Test1 {
    
    

	public static void main(String[] args) {
    
    
		// TODO Auto-generated method stub
		System.out.println(getHash("https://services.gradle.org/distributions/gradle-6.7.1-all.zip"));
//		System.out.println(getHash("https://services.gradle.org/distributions/gradle-3.2-all.zip"));
	}
	
	private static String getHash(String string) {
    
     
		try {
    
     
			MessageDigest messageDigest = MessageDigest.getInstance("MD5"); 
			byte[] bytes = string.getBytes(); 
			messageDigest.update(bytes); 
			return new BigInteger(1, messageDigest.digest()).toString(36); 
		} catch (Exception e) {
    
     
			throw new RuntimeException("Could not hash input string.", e); 
			} 
		}
}

Then change this again:
Insert picture description here
this time I click Debug and it won't work, but it will be fine after restarting!

Write Flutter code under VSCode

First, open our VSCode, download Flutter and Dart plug-ins;

Then, we create a file named EmulatorRun.bat on the desktop, right-click to edit, find the path of emulator.exe in our computer and the name of the virtual machine, and set the delay and speed:
Insert picture description here
After filling in Ctrl + S to save, after closing, Right-click to run as an administrator, and you can run the virtual machine directly:

Next, keep the virtual machine turned on, we go back to VSCode, Ctrl + Shift + ~open the terminal, and enter flutter run:

there is a more convenient way to open the virtual machine:
Insert picture description here
as shown in the figure Show, click [No Device] in the lower right corner of VSCode, select or create a new virtual machine:

The first Hello World program

Delete all the codes in the main.dart file, and we rewrite it ourselves:

//引入UI库,material-ui官网:https://material-ui.com/zh/
import 'package:flutter/material.dart'; //dart与js不同,dart是一定要加末尾的分号的

void main() {
    
    
  runApp(MyApp());
}
/*
同样的意思,使用箭头函数的写法:
void main() => runApp(MyApp());
*/

class MyApp extends StatelessWidget {
    
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

Then enter flutter runrun in the terminal :
Insert picture description here
you can see that the run is successful, we should pay attention to the shortcut keys in the red box;

Flutter update

Flutter over the future as the updated version, you can enter directly in the terminal flutter upgradeupdate can;
but after a general update is complete, simply run flutter runis not being given the run, so the first flutter clean, another flutter run;