1.获取Flutter SDK

1）去flutter官网下载其最新可用的安装包
下载地址：https://flutter.dev/docs/development/tools/sdk/releases#macos

image.png

可以在根目录下单独新建一个安装文件夹
cmd+shift+g 输入根路径 ~/
新建文件夹- Flutter，把下载的安装包解压后的flutter文件拖进去

或者使用终端操作 :

$ cd ~/   
$ mkdir Flutter  
$ cd ~/Flutter  
$ unzip ~/Downloads/flutter_macos_v1.20.4.zip

flutter-1.png

2.设置flutter相关工具到path中，使用flutter指令

// 使用vim打开bash_profile文件  
$ vim ~/.bash_profile  

输入i，进入插入模式，设置下面环境变量  
export PATH=~/Flutter/flutter/bin:$PATH  
export PUB_HOSTED_URL=https://pub.flutter-io.cn  
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn  
点击esc,退出当前模式，输入:wq!或者:x保存内容并退出。

// 更新bash_profile文件  
$source ~/.bash_profile

flutter-2.png

注：
若终端使用的是zsh，下次打开命令行运行提示 zsh: command not found: flutter
flutter命令是一次性的，需要重新执行$source ~/.bash_profile

解决方案：
open ~/.zshrc
在后面添加source ~/.bash_profile

3.测试flutter指令及检查flutter环境

// 查看 flutter 帮助文件   
$flutter -h  
若提示flutter命令不存在，检查第二步是否出错

// 检查flutter依赖项   
$flutter doctor

flutter-3.png

根据提示安装Android Studio
下载地址1：http://www.androiddevtools.cn/

下载地址2：https://developer.android.google.cn/studio/

安装完成后，打开Andriod Studio ,安装flutter插件
Android Studio–>Preferences–>点击Plugins在输入框中输入flutter–>点击安装即可

安装完成后，重启Android Studio

// 安装完成后再次检查flutter安装环境  
$flutter doctor

flutter-4.png

// 若出现Android licenses not accepted 错误，按照要求运行命令
$ flutter doctor --android-licenses  
然后根据提示一直y，y到结束为止。

// 完成后继续检查flutter 安装环境  
$flutter doctor

flutter-5.png

出现 • No issues found! 环境配置就完成了！

若安装Android Studio (version 4.1)，由于插件安装目录与之前的安装目录发生变化，doctor检测时会检测不到安装的flutter和dart插件

旧目录: ~/Library/Application\ Support/AndroidStudio4.1
新目录: ~/Library/Application\ Support/Google/AndroidStudio4.1/plugins

解决办法指令软链接一下目录:

ln -s ~/Library/Application\ Support/Google/AndroidStudio4.1/plugins ~/Library/Application\ Support/AndroidStudio4.1

4.创建flutter项目

创建flutter项目时可以看到
Create New Flutter Project 选择 Flutter Application 创建项目

flutter-6.png

flutter-7.png

5.flutter项目结构分析

android：Andorid相关代码目录，里面代码配置和单独创建Andorid项目有些不一样。

ios：iOS相关代码目录，存放Flutter与ios原生交互的一些代码。

lib：应用源文件，dart文件，核心文件，可以创建不同的文件夹，存放不同文件。flutter开发文件主要在此目录下完成。

test：测试文件。

.gitignore：忽略文件，记录一些不需要关注变更记录的文件，就是不添加到版本记录里面。

.metadata：记录一些Flutter。 project一些基本信息，如版本，项目类型。

.packages:记录一些lib文件的路径。

.iml：是由IntelliJ IDEA创建的模块文件，用于开发Java应用程序的IDE。它存储有关开发模块的信息，该模块可能是Java，Plugin，Android或Maven组件; 保存模块路径，依赖关系和其他设置。

pubspec.lock：这是根据当前项目依赖所生成的文件，记录当前使用的依赖版本。

pubspec.yaml：包含Flutter应用程序的包数据，这个是配置依赖项的文件，比如配置远程public仓库的依赖项，或者本地资源（图片，音视频）。

README.md：项目信息介绍。

6.运行项目

编辑main.dart 文件，可以尝试显示个“Hello world”，把main.dart中所有代码去掉，替换为下面代码:

import 'package:flutter/material.dart';

//这个是Dart中单行函数或者方法的简写
void main() => runApp(MyApp());

//程序继承StatelessWidget，该应用程序成为一个widget，在Flutter中，大多数东西都是widget
class MyApp extends StatelessWidget {
  // 这个是应用的根widget
  @override
  Widget build(BuildContext context) {
    //注意：一个app只能有一个MaterialApp
    return MaterialApp(
      //标题栏的名字
      title: 'Hello Flutter',
      //这个是Material library提供的一个widget，它提供了默认的导航栏、标题栏
      //包含主屏幕的widget树的body属性
      home:new Scaffold(
        appBar:new AppBar(
          title:const Text("Weclome to Flutter"),
        ),
        body:const Center(
          child:const Text("Hello World"),
        ),
    ),
    );
  }
}

选择模拟器，运行！

flutter-8.png

若无法连接模拟器，可以重启Android Studio,重起仍然无法连接，执行命令行：
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

然后重启Android Studio 就能正常连接了。