The use of Flutter 2.2 on macOS - developing iOS and Android apps - from 0 to 1 tutorial

After using it: Dart is very powerful! It supports writing server-side, mobile app-side, and web-side programming languages. The syntax is simple. As long as you have mastered any high-level object-oriented programming language, come to learn Dart, and you will definitely learn it all within 1 hour!

1. Download Flutter
2. Detect Flutter
3. A simple Flutter program example
4. The most basic and basic Flutter code writing
5. Principle of Flutter
6. Flutter deployment packaging

1. Download flutter

Download directly, need to unzip

https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_2.2.1-stable.zip

via git

git clone https://github.com/flutter/flutter.git -b stable

Configure the environment variable, set it once, after closing the Terminal (terminal), you need to set it next time, so this is a one-time setting.
Change the path in the middle to the directory address after decompressing/cloning your flutter

export PATH="$PATH:/Users/admin/Documents/flutter/bin"

2. Overall detection of flutter installation and configuration is correct

flutter doctor

Two integrated development tools, Xcode and Android Studio, need to be installed on macOS. If you use flutter to develop web applications, you also need to install the Chrome browser. If you have not installed these, please install them according to your needs.

3. A simple Flutter program example

flutter create testapp1

testapp1 is the name of our test project, it must be lowercase, otherwise an error will be reported.
When the project is created, you will see the file structure in the testapp1 directory as follows:
insert image description here

iOS indicates the project on the iOS side
android represents the project on the Android side
web means web-side pc and H5 projects
pubspec.yaml represents the management of flutter's resources and dependent libraries

So a flutter project is developed once and run on three terminals!
Then, cd testapp1under the directory, run this project

flutter run

Choose the phone you want to run, or on the emulator,

If you want to run the iOS project, first open the ios/Runner.xcworkspace project and set the signature to run on the real machine/simulator
If you want to run the Android project, first open the Android project and set the relevant parameters

There are many tutorials on the steps of running the app to the real machine/simulator on Baidu, search by yourself

4. The most basic and basic Flutter code writing

In flutter, everything is a widget (component), so we first delete the code in the lib/main.dart file, and then paste the following code

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @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'),
        ),
      ),
    );
  }
}

Rerun the project to see the effect. code link
insert image description here

The structure is very simple!

A main function, program entry
A Flutter app itself is just a widget
Most widgets have a build() function that returns the layout and components within the build() function
MaterialApp is a component of the Material UI library provided by Google
The content displayed on the interface is laid out through the Scaffold component

After reading this article, you will have a preliminary understanding of Dart
https://flutter.dev/docs/get-started/codelab
The tree structure diagram of the entire layout
insert image description here
The way of layout:

Flutter's default Container layout, where Row and Column are nested in Container, and Container can continue to be nested in Row and Column

5. Principle of Flutter

insert image description here
The address of this picture: Portal

Flutter is a set of UI frameworks open sourced by Google. It is cross-platform, that is, it can be released and run on platforms such as iOS, Android, macOS, and Linux. Of course, the OS of Huawei Hongmeng mobile phone is also possible.

As shown in the figure, the entire Flutter upper-level UI, animation, drawing, gestures, and basic library are all implemented using Flutter, and the code is completely open source, that is, you can directly see the source code when you click on the Widget in the framework realization. The underlying engine is implemented using C/C++, there is nothing to say about this.

重点：

About what you use every day
The layout used MaterialAppis Android-like native style
The layout used CupertinoAppis an iOS-like soundtrack style

For example, a blogger who is new to Flutter has developed a graphic homepage similar to an app, as shown in the figure below: iOS & Android & Web H5
insert image description here

The above code
Demo project download: https://github.com/VictorZhang2014/first_simple_flutter_project/tree/master

reference

1. Official tutorial macOS
2. DART programming language Chinese tutorial
3. Flutter widget layout basic tutorial
4. Meituan Flutter principle and practice