flutter 环境搭建起步

一、简单介绍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 可以开启调试模式，这样就可以热重载，修改之后立即生效啦~