Flutter环境安装(超详细)

Flutter环境搭建

1、配置环境变量

• 官方文档：https://flutterchina.club/

1、官方文档的是Linux的下载方法
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

2、window的用户直接将下面的添加到环境变量中
PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

注意：这两个环境变量一定要加，否则可能导致后面 flutter doctor 命令连接不上服务

2、下载 Git for Windows

官方地址：https://git-scm.com/download/win ，下载并安装

如果已安装 Git for Windows，请确保命令提示符或PowerShell中运行 git 命令，不然在后面运行flutter doctor时将出现Unable to find git in your PATH错误, 此时需要手动添加C:\Program Files\Git\bin至Path系统环境变量中。

3、下载Flutter SDK

官方地址：https://docs.flutter.dev/get-started/install

• 下载好后，将文件放到 D盘或其它非系统盘，这里我放在evn（存放环境的一个文件夹）

• 配置环境变量–指定到bin目录（虽然点击.bat文件就可以运行，但是为了方便能够在cmd窗口直接运行flutter，所有还是要去配置环境变量）
  
• 检查是否安装成功

flutter --version 查看是否安装成功
flutter -h  能够展示指令，表示安装配置成功

flutter doctor //诊断flutter的环境配置是否合格
下面表示未安装 Android SDK 和 Android studio

4、下载Android Studio

• .目前官网上已经没有单独的SDK下载安装包了。目前官网推荐的是下载包含有Android SDK的Android Studio。（下面链接为知识拓展，可忽略，直接下载android studio 即可）
• https://www.cnblogs.com/nebie/p/9145627.html（Android SDK下载与安装）
• https://www.androiddevtools.cn/ （Android工具插件下载，）

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

• 下载后安装，处理选择安装环境，其它next即可
  

• 第一次安装，报错，点取消，后会引导你安装android sdk
  

• 安装android sdk 并设置安装位置，之后耐心等待安装即可
  

• sdk 安装完成之后进行环境变量配置

ANDROID_HOME = Android sdk 安装的位置添加完成之后 
输入 flutter docotr进行检测
如果新终端显示 Android sdk 处还是红叉，就重启电脑再进行 flutter docotr进行检测

[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)

​ X cmdline-tools component is missing

​ Run path/to/sdkmanager --install "cmdline-tools;latest"

​ See https://developer.android.com/studio/command-line for more details.

​ X Android license status unknown.

​ Run flutter doctor --android-licenses to accept the SDK licenses.

​ See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.

[！Android工具链-为Android设备开发(Android SDK version 31.0.0)
缺少X cmdline-tools组件
运行' path/to/sdkmanager——install "cmdline-tools;latest"
详情请参见https://developer.android.com/studio/command-line。
X Android许可状态未知。
运行' flutter doctor --android-licenses '来接受SDK许可证。
详情请参见https://flutter.dev/docs/get-started/install/windows#android-setup。

• Android sdk 感叹号问题解决方案

根据上面提示运行 flutter doctor -android-licenses 发现还是报错，如下

Android sdkmanager not found. Update to the latest Android SDK and 
ensure that the cmdline-tools are installed toresolve this.
--没有找到Android sdkmanager。更新到最新的Android SDK，
--并确保cmdline-tools安装到解决这个问题。

• 打开studio–选择sdk manager – sdk tools – 底部取消勾选 – 再勾选2个sdk tools – 点击ok
  
  

• 安装完成后打开终端–输入指令–不报错，出现输入，一直Y即可

flutter doctor --android-licenses
之后再
flutter doctor 检查环境状况
一般情况 检查应该是全部通过的
如果不通过就看下面的失败示例

• 失败实例

[!] Android toolchain - develop for Android devices

​ X Unable to locate Android SDK.

​ Install Android Studio from: https://developer.android.com/studio/index.html

​ On first launch it will assist you in installing the Android SDK components.

​ (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).

​ If the Android SDK has been installed to a custom location, please use

​ flutter config --android-sdk to update to that location.

​ X No valid Android SDK platforms found in D:\evn\android_SDK\platforms. Candidates were:

​ - android-31

[！Android工具链-为Android设备开发
X无法定位Android SDK。
安装Android Studio从:https://developer.android.com/studio/index.html
在第一次启动时，它将帮助您安装Android SDK组件。
(或https://flutter.dev/docs/get-started/install/windows#android-setup获取详说明)
如果Android SDK已经安装到自定义位置，请使用
' flutter config -android-sdk '更新到该位置。
在D:\evn\android_SDK\平台中找不到有效的Android SDK平台。候选人:
——android-31

• 如果还报错就添加，之后再尝试 flutter doctor

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\tools 
两个path变量

• 检查全通过，表示环境配置已经完成了
  

5、设置Android模拟器

1. 在您的机器上启用 VM acceleration .
2. 启动 Android Studio>Tools>Android>AVD Manager 并选择 Create Virtual Device.
3. 选择一个设备并选择 Next。
4. 为要模拟的Android版本选择一个或多个系统映像，然后选择 Next. 建议使用 x86_64 image .
5. 在 Emulated Performance下, 选择 Hardware - GLES 2.0 以启用 硬件加速.
6. 验证AVD配置是否正确，然后选择 Finish。
   

• 选android 12 版本的进行下载
  
• 设置机型名称、方向、硬件加速
  
• 启动模拟器
  

6、安装插件

安装Flutter和Dart插件需要安装两个插件:

• Flutter插件： 支持Flutter开发工作流 (运行、调试、热重载等).
• Dart插件： 提供代码分析 (输入代码时进行验证、代码补全等).

（1）启动Android Studio.

（2）打开插件首选项 (Preferences>Plugins 搜索并安装）.

（3）选择 Browse repositories…, 选择 Flutter 插件并点击 install.

（4）重启Android Studio后插件生效.

7、创建我的第一个flutter项目

• 创建项目后，找到main.dart文件进行运行，等待项目启动到模拟器上，表示成功配置好
  

8、拓展，直接使用VsCode替代 Android Studio编辑器

• （as 太占内存资源了，vscode yyds）

• VsCode 安装 flutter插件
  

• 创建bat脚本，唤起模拟器

//创建一个bat脚本，运行模拟器
D:\evn\android_sdk\emulator\emulator.exe -netdelay none -netspeed full -avd Pixel_4a_API_31

-netdelay none  //无延迟
-netspeed full  //速度为全速
-avd Pixel_4a_API_31 //模拟器名称，中间空格用_代替 

之后运行看是否能够正常唤起模拟器

• 通过bat脚本唤起模拟器成功
  
• 导入flutter项目，flutter run 运行项目到模拟器
  

9、使用flutter

import 'package:flutter/material.dart';  //引入一个flutter的个UI库包（http://material.io/）

//主函数main()
void main(){
    
    
  runApp(MyApp());
}

// 继承StatelessWidget 的方法
class MyApp extends StatelessWidget {
    
    

  @override  //重构父类方法
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      title: 'welcome to Flutter',
      home: Scaffold(
        //顶部标题
        appBar: AppBar(
          title: Text('welcome to Flutter')
        ),
        //中心内容区
        body: Center(
          child: Text('Hello world')
        ),
      ),
      
    );
  }
}

• 更改之后 ctrl+c 结束，再 flutter run运行项目

flutter run 后 快捷操作键
r //热更新
p //显示网格
d //ios 和安卓模式切换
q //退出

相关视频教程：
https://www.bilibili.com/video/BV1ag411M7VG/?spm_id_from=333.788.recommend_more_video.1