Study harmoniously! Don’t be impatient!! I’m your old friend, Xiao Qinglong

Check the work

Check the FLUTTER configuration environment first

If they are checked, they are all configured

If you do not know how to configure your friends, you can baidu, I will set up a phase of the environment when the new Mac arrives.Copy the code

Create the FLUTTER Project

Create projects with commands

1. Create a folder flutterStudy under the document to store all future FLUTTER projects

cd /Users/jss/Documents
Copy the code
mkdir flutterStudy
Copy the code

2. Under the folder flutterStudy, create a project named Flutter_study01. The iOS and Android development languages are Object-C and Java

cd flutterStudy
Copy the code
flutter create -i objc -a java flutter_new
Copy the code

3. Open the simulator

open -a Simulator
Copy the code

4. Run projects

flutter run
Copy the code

5. The terminal exits the running state of the project

q
Copy the code

Create projects with Android Studio

Next, go to the page for configuring basic project information

'Project path'If you do it manually, be sure to check that the path is taken at the end'Project name'
Copy the code

Then wait a few seconds for the development tool to pull and configure the Flutter project environment.

Then we can see an interface like this

Run the project

Click the “Green Triangle” button in the upper right corner to run

I intercepted the console log

Here’s what the interface looks like

Click + to add up the numbers.

Thermal overload

Many times, when a project is large and we change the color of a component on the interface, recompiling will be slow.

Flutter provides developers with a feature called —— thermal overload

In main.dart, we see this comment:

// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.This is the theme of the application. Try to run the application using Flutter Run. You will see that the application has a blue toolbar. Then, without quitting the application, try changing primarySwatch below to colors.green, and then call "hot Reload" (press "R" in the console where "Flutter Run" is running, or simply save the changes to "Hot Reload" in the flutter IDE. Notice that the counter is not reset back to zero; The application has not been restarted.Copy the code

Hot reloading is an introduction to the use of hot reloading, which we can play with.

Follow the comments in the default run interface

  1. Dot plus adds up the numbers to seven
  2. Modify the code to change the color to green
  3. Click the lightning ⚡️ symbol to perform a thermal reload

Mobile phone interface before and after comparison

Before thermal overload 👇Copy the code

After thermal overload 👇Copy the code

We’ll see that hot overloading only updates the part of the code we changed, and the rest of the code doesn’t change, so the number 7 stays.

Personal Use discovery: Command + S automatically performs hot reloadingCopy the code

Write your own code to print Hello Word!

A supplement to flutter Type

  • Application: Create an app

  • Plugin: Create a plugin that contains some native Android and iOS code

  • Package: Create a third-party library that contains only the Dart language

  • Module: Mixed development requires this

Run android emulator Caton

Sometimes you might get stuck on the bottom line

Running Gradle task 'assembleDebug'...
Copy the code

To solve this problem, open the build.gradle file and change it to this

maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
Copy the code

How to configure the app icon on Android

How to configure the startup page for Android

How do I add local resources to the project

The resource file is added to the project and openedpubspec.yamlIn the comments

Remove a space

Modify the code as follows

At this point, the resource file is loaded and configured.

How to use resource images

Decide which images you want to use

Set the picture, and adjust the size of the picture (the picture path is not wrong, with the format suffix)

Running effect