Flutter 开发环境搭建-VS Code篇

1.准备环境

  • Java SDK 下载及安装
  • Flutter SDK 安装及配置环境变量 下载地址
  • 将flutter sdk解压目录下的bin目录放到系统环境变量中

检查环境,在系统终端中输入:

bash 复制代码
# 打印flutter sdk版本号
flutter --version

# 检查flutter运行环境
flutter doctor

第一次运行可能会出现部分工具没有安装。

  • Android Studio安装
  • Dart 和 Flutter插件安装(Flutter会自动安装Dart插件)

2.Android Studio 开发环境搭建

2.1 Android Studio新建Flutter

在Plugins中安装了Flutter插件后,新建项目选择新建 Flutter project,再次选择Flutter Application,等待一会即可生成项目。

2.2 安装AVD虚拟机

项目生成后需要安装AVD虚拟机,用于测试我们的应用程序,先安装虚拟机:

选择设备型号:

选择Android 版本,可以选择相对高的版本或指定版本:

设置虚拟机名称方便区分多个虚拟机:

3. VSCode中搭建开发环境

对于前端开发来讲 Android Studio可能用不习惯,可以使用VSCode来开发。

3.1 VSCode安装Flutter和Dart插件

安装Flutter一般会自动安装Dart插件。

3.2 VSCode安装和启用虚拟机

状态栏下面选择设备:

3.3 VSCode新建Flutter项目并运行

在终端中使用命令行可以创建flutter项目:

bash 复制代码
flutter create [项目名]

在项目根目录执行命令:

bash 复制代码
# flutter运行到虚拟机
flutter run

虚拟机运行效果:

相关推荐
恋猫de小郭20 分钟前
Flutter A2UI 的正确用法,怎么把 AI 和动态 UI 结合有效生产
android·前端·flutter
余额瞒着我当琳25 分钟前
C++--vector第二讲:手写 C++ STL:vector 源码剖析与迭代器失效分析
android·java·c++
程序员-珍29 分钟前
安卓开发:同名 styles.xml 在不同分支/文件夹的合并规则
android·xml·前端
雾沉川31 分钟前
Rust IDE 选型:除 VS Code 之外,RustRover 非商业场景可免费使用
ide·vscode·rust
我命由我1234539 分钟前
Compose Codelab 学习 - Compose 中的基本布局
android·java·java-ee·kotlin·android studio·android-studio·android runtime
ii_best40 分钟前
手机自动化脚本按键精灵实战:随机布局安全数字键盘的自动化输入方案
android·运维·ios·自动化·手机
2601_965798471 小时前
Boutique Business Consulting WordPress Architecture & SEO Setup
android·theme·wordpress
三少爷的鞋1 小时前
Android 架构进阶:为什么项目越大,越需要把对象创建权拿走
android
杜子麟3 小时前
Android studio模拟器离线安装
android·macos·android studio
年小个大6 小时前
受 go-zero 启发,我给 Flutter 整了套 MVI-BLoC 脚手架
android·flutter·架构