一、简单介绍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/ if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); } // 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 if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); } 三、常见问题 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,可直接打开项目 if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); } 2、VScode 配置flutter 插件 Flutter Dart dart-import 打开settings 搜索hot reload ，把 Flutter Hot Reload On Save 设置为all ** ps: 当然还有很多的插件都是值得安装的，我们这里只是先确保下我们的热重载 3、打开一个模拟器 open -a simulator // 开启一个默认是IOS的模拟器 if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); } 4、跑起来 flutter run // 会运行到默认打开的那个模拟器上 // 按F5 可以开启调试模式，这样就可以热重载，修改之后立即生效啦~ if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); }

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

本网站的服务器由提供