当前位置: 首页 > news >正文

Flutter windows 环境配置

Flutter windows 环境配置

从零开始,演示flutter环境配置到启动项目,同时支持 vscode 和 android studio

目录

  • Flutter windows 环境配置
    • 一、环境配置
    • 1. Flutter SDK
    • 2. Android Studio
    • 3. JDK
    • 4. 拓展安装
    • 5. Visual Studio 2022
    • 二、项目创建和启动
    • 1. vscode
    • 2. Android Studio

一、环境配置

1. Flutter SDK

Flutter Windows SDK 下载地址

(1)将解压后的bin目录放入系统环境变量的Path中

Tips : 放在系统变量中时,需要管理员CMD才能使用命令,可以选择放在用户变量中

解压目录\flutter\bin
解压目录\flutter\bin\cache\dart-sdk\bin

在这里插入图片描述

(2)新建系统变量,配置源

PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn# 清华源(如果官方的临时源速度慢,可以用这个,速度快)
PUB_HOSTED_URL=https://mirrors.tuna.tsinghua.edu.cn/dart-pub
FLUTTER_STORAGE_BASE_URL=https://mirrors.tuna.tsinghua.edu.cn/flutter
在这里插入图片描述在这里插入图片描述

(3)检测配置

# 测试是否配置完成 (管理员CMD)
flutter --version
dart --version# 可以检测系统缺少什么 chrome可以用edge替代,visual studio 自行安装
flutter doctor

2. Android Studio

Android Studio下载地址

(1)打开软件后会提示Android SDK未安装,取消掉,一直默认next即可。

(2)正式进入软件界面后,在 Project 界面中点击 More Actions ,选择SDK Manager

在这里插入图片描述

(3)在弹出的页面中,选择Android SDK Command-line Tools (latest) , 再点击ok即可安装。

在这里插入图片描述

(4)android-licenses

# CMD输入命令 一直Y
flutter doctor --android-licenses

(5)最后可以在Android Studio 中的 More Actions中选择合适的安卓模拟器进行安装,默认会带一个模拟器。

在这里插入图片描述

3. JDK

JDK 下载地址

正常安装,我安装的是21版本,一直next即可

# 新建环境变量
JAVA_HOME=安装目录
CLASSPATH=.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;%JAVA_HOME%\lib;
在这里插入图片描述在这里插入图片描述
# 环境变量Path
%JAVA_HOME%\bin

在这里插入图片描述

4. 拓展安装

需要安装 dart + flutter

(1)vscode - 插件市场上安装

在这里插入图片描述在这里插入图片描述

(2)Android Studio - Plugins中安装

在这里插入图片描述

5. Visual Studio 2022

选择C++桌面开发后,右侧列表中检查是否勾选了Windows SDK,需要勾选,再点击安装即可。

在这里插入图片描述

二、项目创建和启动

1. vscode

(1)ctrl+shift+p 搜索 Flutter 选择 Flutter:New Project

在这里插入图片描述

(2)选择Application,点击后需要选择项目目录,并输入名称

在这里插入图片描述

(3)创建项目完成

在这里插入图片描述

(4)右下角Select Device可选择启动设备

在这里插入图片描述

(3)选择启动的平台,下面是Android Studio默认的模拟器

在这里插入图片描述

(4)启动项目

首次启动会下载相关包,需要github的网络,如果等了很久可以切换清华源

# 可能会卡在这里很久,需要注意是否能访问github
Flutter assets will be downloaded from https://mirrors.tuna.tsinghua.edu.cn/flutter. Make sure you trust this source!
Launching lib\main.dart on sdk gphone64 x86 64 in debug mode...
Flutter assets will be downloaded from https://mirrors.tuna.tsinghua.edu.cn/flutter. Make sure you trust this source!
Running Gradle task 'assembleDebug'...      

启动方式有两种

① 控制台输入 flutter run

在这里插入图片描述

② 使用vscode的运行与调试,点击运行

在这里插入图片描述

2. Android Studio

(1)安装完拓展后会显示新的选项,选择New Flutter Project

在这里插入图片描述

(2)选择flutter后,这边可以选择项目的初始化设置,不需要的可以取消,取消后不会生成对应目录。

在这里插入图片描述

(3)先选择模拟器后再启动项目

在这里插入图片描述
(4)启动后模拟器不会自动弹出,需要点击右下角的 “Running Devices”

在这里插入图片描述

http://www.lryc.cn/news/267307.html

相关文章:

  • odoo17核心概念view5——ir_ui_view.py
  • 截断整型提升算数转换
  • 阿里云 ECS Docker、Docker Compose安装
  • LeetCode——1276. 不浪费原料的汉堡制作方案
  • 隆道吴树贵:生成式人工智能在招标采购中的应用
  • docker搭建kali及安装oneforall
  • 【MySQL】数据库之事务
  • AGV|RGV小车RFID传感器CNS-RFID-01/1S的RS232通讯联机方法
  • 【Python可视化系列】一文教会你绘制美观的热力图(理论+源码)
  • 百度Apollo五步入门自动驾驶:Dreamview与离线数据包分析(文末赠送apollo周边)
  • 为什么IPv6 可以作为低功耗蓝牙的物联网体系结构?
  • GPT每预测一个token就要调用一次模型
  • 运维工程师的出路到底在哪里?
  • 2312clang,基于访问者的前端动作
  • 怎么搭建实时渲染云传输服务器
  • 如何在生产环境正确使用Redis
  • LeetCode-环形链表问题
  • C# 读取Word表格到DataSet
  • 构建外卖系统:从技术到实战
  • 城市之眼:数据可视化在智慧城市的角色
  • Nature | Baker团队用AI设计出史上最高互作强度的蛋白质
  • C# 初识System.IO.Pipelines
  • 嵌入式——RTC内置实时时钟
  • nodejs微信小程序+python+PHP的热带野生动物园景点预约订票系统的设计与实现-计算机毕业设计推荐
  • ASP.NET MVC的5种AuthorizationFilter
  • C语言初学8:函数和作用域
  • 2024年科技盛宴“上海智博会·上海软博会”招商工作接近尾声
  • 深圳锐科达SIP矿用电话模块SV-2801VP
  • 【Qt-数据库】
  • windows文件名命名规范(文件名规范、命名规则、避免特殊字符、注意文件名长度限制260个字符)