Flutter环境安装(超详细)

Flutter环境搭建

文章目录

**Flutter环境搭建**
- - **1、配置环境变量**
  - **2、下载** **Git for Windows**
  - **3、下载Flutter SDK**
  - **4、下载Android Studio**
  - **5、设置Android模拟器**
  - **6、安装插件**
  - **7、创建我的第一个flutter项目**
  - **8、拓展，直接使用VsCode替代 Android Studio编辑器**
  - **9、使用flutter**

1、配置环境变量

官方文档：/

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

官方地址：/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

官方地址：/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 即可）
/nebie/p/（Android SDK下载与安装）
/ （Android工具插件下载，）

android studio 下载地址：/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 /studio/command-line for more details.

X Android license status unknown.

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

See /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"
详情请参见/studio/command-line。
X Android许可状态未知。
运行' flutter doctor --android-licenses '来接受SDK许可证。
详情请参见/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: /studio/

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

(or visit /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从:/studio/
在第一次启动时，它将帮助您安装Android SDK组件。
(或/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模拟器

在您的机器上启用 VM acceleration .
启动 Android Studio>Tools>Android>AVD Manager 并选择 Create Virtual Device.
选择一个设备并选择 Next。
为要模拟的Android版本选择一个或多个系统映像，然后选择 Next. 建议使用 x86_64 image .
在 Emulated Performance下, 选择 Hardware - GLES 2.0 以启用硬件加速.
验证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项目

在这里插入图片描述

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

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

（as 太占内存资源了，vscode yyds）
VsCode 安装 flutter插件
创建bat脚本，唤起模拟器

//创建一个bat脚本，运行模拟器
D:\evn\android_sdk\emulator\ -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/';  //引入一个flutter的个UI库包（/）

//主函数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 //退出

在这里插入图片描述

相关视频教程：
/video/BV1ag411M7VG/?spm_id_from=333.788.recommend_more_video.1

秒客网

Flutter环境安装(超详细)

Flutter环境搭建

文章目录

1、配置环境变量

2、下载 Git for Windows

3、下载Flutter SDK

4、下载Android Studio

5、设置Android模拟器

6、安装插件

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

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

9、使用flutter

相关文章