Flutter环境搭建

417 阅读5分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第1天,点击查看活动详情

配置环境变量

1、官方文档的是Linux的下载方法
exportPUB_HOSTED_URL=https://pub.flutter‐io.cn
exportFLUTTER_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 命令连接不上服务

image.png

下载 Git for Windows

官方地址:git-scm.com/download/wi… ,下载并安装如果已安装 Git for Windows,请确保命令提示符或PowerShell中运行 git 命令,不然在后面运行flutter doctor时将出现Unable to find git in your PATH错误, 此时需要手动添加C:\Program Files\Git\bin至Path系统环境变量中。 image.png image.png

下载Flutter SDK

  • 官方地址:docs.flutter.dev/get-started… image.png image.png
  • 下载好后,将文件放到 D盘或其它非系统盘,这里我放在evn(存放环境的一个文件夹) image.png
  • 配置环境变量--指定到bin目录(虽然点击.bat文件就可以运行,但是为了方便能够在cmd窗口直接运行flutter,所有还是要去配置环境变量) image.png
  • 检查是否安装成功
flutter ‐‐version 查看是否安装成功
flutter ‐h 能够展示指令,表示安装配置成功

image.png

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

image.png

下载Android Studio

image.png

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

image.png

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

image.png

  • 安装android sdk 并设置安装位置,之后耐心等待安装即可 image.png
  • sdk 安装完成之后进行环境变量配置
ANDROID_HOME= Android sdk 安装的位置添加完成之后
输入 flutter docotr进行检测
如果新终端显示 Android sdk 处还是红叉,就重启电脑再进行 flutter docotr进行检测

image.png

[!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许可证。

详情请参见flutter.dev/docs/get‐st…

  • 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个sdktools -- 点击ok

image.png

  • 安装完成后打开终端--输入指令--不报错,出现输入,一直Y即可
flutter doctor ‐‐android‐licenses
之后再
flutter doctor 检查环境状况
一般情况检查应该是全部通过的
如果不通过就看下面的失败示例

image.png

  • 失败实例
[!] 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 fordetailed 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变量
  • 检查全通过,表示环境配置已经完成了

设置Android模拟器

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

image.png

  • 选android 12 版本的进行下载

image.png

  • 设置机型名称、方向、硬件加速

image.png

  • 启动模拟器

image.png

安装插件

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

  • Flutter插件: 支持Flutter开发工作流 (运行、调试、热重载等)
  • Dart插件: 提供代码分析 (输入代码时进行验证、代码补全等)
  1. 启动Android Studio.
  2. 打开插件首选项 (Preferences>Plugins 搜索并安装)
  3. 选择 Browse repositories..., 选择 Flutter 插件并点击 install.
  4. 重启Android Studio后插件生效.

image.png

创建我的第一个flutter项目

image.png

image.png

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

image.png

拓展,直接使用VsCode替代 Android Studio编辑器

  • (as 太占内存资源了,vscode yyds)
  • VsCode 安装 flutter插件

image.png

  • 创建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脚本唤起模拟器成功

image.png

  • 通过bat脚本唤起模拟器成功

image.png

导入flutter项目,flutter run 运行项目到模拟器

image.png

使用flutter

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

//主函数main()
voidmain(){
    runApp(MyApp());
}
// 继承StatelessWidget 的方法
classMyAppextendsStatelessWidget{

@override //重构父类方法
    Widget build(BuildContext context){
    returnMaterialApp(
        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 //退出相关视频教程:

相关视频教程:www.bilibili.com/video/BV1ag…