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"

相关推荐
晚霞的不甘16 小时前
Flutter for OpenHarmony实现 RSA 加密:从数学原理到可视化演示
人工智能·flutter·计算机视觉·开源·视觉检测
子春一16 小时前
Flutter for OpenHarmony:跨平台虚拟标尺实现指南 - 从屏幕测量原理到完整开发实践
flutter
renke336416 小时前
Flutter for OpenHarmony:形状拼图 - 基于路径匹配与空间推理的交互式几何认知系统
flutter
千逐6816 小时前
多物理场耦合气象可视化引擎:基于 Flutter for OpenHarmony 的实时风-湿-压交互流体系统
flutter·microsoft·交互
ujainu16 小时前
保护你的秘密:Flutter + OpenHarmony 鸿蒙记事本添加笔记加密功能(五)
flutter·openharmony
特立独行的猫a16 小时前
主要跨端开发框架对比:Flutter、RN、KMP、Uniapp、Cordova,谁是未来主流?
flutter·uni-app·uniapp·rn·kmp·kuikly
一只大侠的侠16 小时前
Flutter开源鸿蒙跨平台训练营 Day17Calendar 日历组件开发全解
flutter·开源·harmonyos
晚霞的不甘16 小时前
Flutter for OpenHarmony 打造沉浸式呼吸引导应用:用动画疗愈身心
服务器·网络·flutter·架构·区块链
renke336417 小时前
Flutter for OpenHarmony:数字涟漪 - 基于扩散算法的逻辑解谜游戏设计与实现
算法·flutter·游戏
一只大侠的侠17 小时前
Flutter开源鸿蒙跨平台训练营 Day14React Native表单开发
flutter·开源·harmonyos