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

虚拟机运行效果:

相关推荐
IT陈图图2 分钟前
基于 Flutter × OpenHarmony 开发的文本处理工具箱首页
flutter·华为·openharmony
小白阿龙20 分钟前
鸿蒙+Flutter 跨平台开发——一款“随机宝盒“的开发流程
flutter·华为·harmonyos·鸿蒙
csj5028 分钟前
安卓基础之《(18)—内容提供者(4)在应用之间共享文件》
android
尤老师FPGA1 小时前
使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第四十五讲)
android·java·ui
爱吃大芒果1 小时前
Flutter for OpenHarmony前置知识:Dart 语法核心知识点总结(下)
开发语言·flutter·dart
小蜜蜂嗡嗡1 小时前
【flutter better_player_plus实现普通播放器功能】
flutter
AI_零食2 小时前
鸿蒙跨端框架 Flutter 学习 Day 6:异步编程:等待的艺术
学习·flutter·华为·交互·harmonyos·鸿蒙
北辰当尹2 小时前
xml基础
android·xml
龙之叶2 小时前
【Android Monkey源码解析四】- 异常捕获/页面控制
android·windows·adb·monkey
猛扇赵四那边好嘴.2 小时前
Flutter 框架跨平台鸿蒙开发 - 旅游足迹记录本应用开发教程
flutter·华为·harmonyos·旅游