建立第一个 Flutter 2.0

环境搭建

进入官网下载安装包，按照文档提示搭建环境
https://flutter.dev/docs/get-started/install/macos

编辑文件

$ cd ~
$ vi .bash_profile 

# 把 Flutter 目录替换成自己的目录
export PATH="$PATH:/Users/yinminzhi/Applications/flutter/bin"

# 保存退出后
$ source ~/.bash_profile

# 检查环境安装是否成功， Flutter SDK 中包含了 Dart 
$ which flutter
$ which flutter dart

编辑器

我是使用 VSCode 的，增加一个 Flutter 插件就行了，具体步骤参见官方文档

创建项目

我是使用创建的，使用 VSCode 创建不成功，用终端倒很方便
终端内进入到项目目录

$ flutter create microeledrap
> Creating project mxtest..

gradle 下载

终端里一直 Loading 在下载 ，看不见进度，感觉太慢了，替换包本地包

使用 VSCode 打开 android/gradle/wrapper 复制 distributionUrl 中的 URL
在浏览器打开 https://services.gradle.org/distributions/gradle-6.7-all.zip
下载好后放到本地里，如： /Users/yinminzhi/Public/android/

# 编辑 android/gradle/wrapper/gradle-wrapper.properties
# 替换成本地包
# distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip
distributionUrl=file:///Users/yinminzhi/Public/android/gradle-6.7-all.zip

调试设备

使用 USB 外接了一台魅族手机，
手机上开启开发者模式
连接时检查手机是否是使用了文件传输方式

$ flutter devices
3 connected devices:
M6 Note (mobile) • 721xxxxxEQB       • android-arm64  • Android 7.1.2 (API 25)
Chrome (web)     • chrome              • web-javascript • Google Chrome 90.0.4430.72

$ cd microeledrap 
# 安装应用到手机上
$ flutter run
Launching lib/main.dart on M6 Note in debug mode...
Running Gradle task 'assembleDebug'...    
✓ Built build/app/outputs/flutter-apk/app-debug.apk.
Installing build/app/outputs/flutter-apk/app.apk..
# 在手机上选择允许

使用终端启动无法自动刷新，每次都得在终端里按 r 刷新

VSCode 启动 Flutter

启动后等一会就能像终端启动一个效果了，编辑文件后保存文件时，APP 会自动刷新

编辑文件

打开 lib/main.dart.
改变文件中的字符，如：

'You have pushed the button this many times' 
# 改为
'You have clicked the button this many times'
# 保存
Reloaded 1 of 601 libraries in 1,330ms.

保存后，观察手机，字符已经生效