Flutter windows 环境配置

Flutter windows 环境配置

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

目录

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

一、环境配置

1. Flutter SDK

Flutter Windows SDK 下载地址

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

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

bash 复制代码
解压目录\flutter\bin
解压目录\flutter\bin\cache\dart-sdk\bin

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

bash 复制代码
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)检测配置

bash 复制代码
# 测试是否配置完成 (管理员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

bash 复制代码
# CMD输入命令 一直Y
flutter doctor --android-licenses

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

3. JDK

JDK 下载地址

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

bash 复制代码
# 新建环境变量
JAVA_HOME=安装目录
CLASSPATH=.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;%JAVA_HOME%\lib;
bash 复制代码
# 环境变量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的网络,如果等了很久可以切换清华源

bash 复制代码
# 可能会卡在这里很久,需要注意是否能访问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"

相关推荐
BG13 小时前
Flutter 简仿Excel表格组件介绍
flutter
zhangmeng17 小时前
FlutterBoost在iOS26真机运行崩溃问题
flutter·app·swift
恋猫de小郭17 小时前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
卡尔特斯17 小时前
Flutter A GlobalKey was used multipletimes inside one widget'schild list.The ...
flutter
w_y_fan20 小时前
Flutter 滚动组件总结
前端·flutter
醉过才知酒浓21 小时前
Flutter Getx 的页面传参
flutter
火柴就是我2 天前
flutter 之真手势冲突处理
android·flutter
Speed1232 天前
`mockito` 的核心“打桩”规则
flutter·dart
法的空间2 天前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios
恋猫de小郭2 天前
Android 将强制应用使用主题图标,你怎么看?
android·前端·flutter