一、简单介绍flutter
Build apps for any screen! 跨端多栈方案终结者
英文自学通道
中文自学通道
二、基础软件安装
VScode 作为代码编辑器
Android Studio 作为安卓simulator(模拟器)提供者
Xcode 作为 IOS simulator(模拟器)提供者
Flutter macOS 和windows 参照官网下载对应最新包，配置好环境变量
// windows
1、下载最新包 https://docs.flutter.dev/get-started/install/windows
// 找个目录存放你的flutter 要注意的是目标路径中避免特殊字符和空格，比如C:\Program Files\
2、应解压到比如 C:\src\flutter
// 如果你不想安装一个固定的flutter版本，而是不断获取新的flutter
3、可以不用做1,2，直接到目标目录比如 C:\src 下 执行 git clone https://github.com/flutter/flutter.git -b stable
4、更新环境变量
// (1)转到 “控制面板>用户帐户>用户帐户>更改我的环境变量
// (2)在“用户变量”下检查是否有名为“Path”的条目:如果该条目存在, 追加 flutter\bin的全路径，使用 ; 作为分隔符.如果条目不存在, 创建一个新用户变量 Path ，然后将 flutter\bin的全路径作为它的值.
// (3)在“用户变量”下检查是否有名为”PUB_HOSTED_URL”和”FLUTTER_STORAGE_BASE_URL”的条目，如果没有，也添加它们。然后重启windows
// 注意 PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL是google为国内开发者搭建的临时镜像，可以参考https://github.com/flutter/flutter/wiki/
// macOS
1、下载最新包 https://docs.flutter.dev/get-started/install/macos
// 找个目录存放你的flutter
2、cd ~/development
3、unzip ~/Downloads/flutter_macos_3.3.0-stable.zip
4、export PATH="$PATH:`pwd`/flutter/bin"
// 新开一个终端，诊断下flutter
5、flutter doctor
三、常见问题
-
1、cmdline-tools component is missing
顾名思义，没有安装对应的命令行工具
解决方法:
打开Android Studio，系统偏好Appearance & Behavior 下的Android SDK
选择SDK Tools 找到如下，apply 后 OK~
下载命令行工具 -
2、Android license status unknown
flutter 给了解决命令: flutter doctor --android-licenses 一路选y就行 -
3、CocoaPods not installed
解决命令: sudo gem install cocoapods -
4、CocoaPods installed but not working
解决命令: sudo gem install cocoapods (重新装下，要输入用户名密码) -
5、HTTP host "https://cocoapods.org/" is not reachable.
类似问题还有比如 "HTTP host "https://pub.flutter-io.cn" is not reachable." ""https://storage.flutter-io.cn""
解决方法: 找到flutter 安装目录，进入路径/Users/luyouming/ flutter/packages/flutter_tools/lib/src/http_host_validator.dart 用vscode 打开编辑。如果公司不允许访问外网:- (1) 修改https://maven.google.com/为 google maven 的国内镜像http://maven.aliyun.com/repository/google/
- (2) kPubDevHttpHost 改为 http://pub.flutter-io.cn/
- (3) kgCloudHttpHost 改为 http://storage.flutter-io.cn/
- (4) 进入到flutter\bin目录，删除cache目录下的flutter_tools.snapshot 文件
- (5) 在终端输入flutter doctor，如果还有请求无法触达的，单独链接ping一下，试试，链接过时了，找对应新的国内镜像地址即可，如果https地址不可访问，换http 试试~
四、创建一个项目
相信现在你看到的应该如下:
一切就绪
1、选择项目文件夹进入，创建你的第一个flutter 应用
// 进入终端，找到目标文件夹
cd Projects
flutter create flutter_app // 注意命名用_隔开
code flutter_app // 安装了vscode,可直接打开项目
2、VScode 配置flutter 插件
- Flutter
- Dart
- dart-import
- 打开settings 搜索hot reload ，把Flutter Hot Reload On Save 设置为all
** ps: 当然还有很多的插件都是值得安装的，我们这里只是先确保下我们的热重载
3、打开一个模拟器
open -a simulator // 开启一个默认是IOS的模拟器
4、跑起来
flutter run // 会运行到默认打开的那个模拟器上
// 按F5 可以开启调试模式，这样就可以热重载，修改之后立即生效啦~
