从 0 到 1 搭建 Flutter 开发环境:Windows+Android 篇
Flutter 是谷歌公司开发的一款开源、免费的跨平台应用开发框架。它的出现,让开发者能够使用一套代码库,同时构建出适用于多种平台的应用,包括手机、桌面、网页等。从 Flutter 3.x 版本开始,其支持的平台更是进一步扩展,涵盖了安卓、iOS、Web、Windows、Mac OS 以及 Linux。跨平台性:一套代码,多平台运行,大大减少了开发成本和时间。高性能:采用 Dart 语言,拥有出色
目录
从 0 到 1 搭建 Flutter 开发环境:Windows+Android 篇
在移动应用和跨平台开发领域,Flutter 凭借其强大的功能和高效的开发体验,受到了广大开发者的青睐。今天,就让我们一起来深入学习如何在 Windows 系统上搭建 Flutter 开发环境,同时实现 Android 应用的开发和真机调试。
一、Flutter 框架简介
Flutter 是谷歌公司开发的一款开源、免费的跨平台应用开发框架。它的出现,让开发者能够使用一套代码库,同时构建出适用于多种平台的应用,包括手机、桌面、网页等。从 Flutter 3.x 版本开始,其支持的平台更是进一步扩展,涵盖了安卓、iOS、Web、Windows、Mac OS 以及 Linux。
Flutter 具有诸多优势:
- 跨平台性:一套代码,多平台运行,大大减少了开发成本和时间。
- 高性能:采用 Dart 语言,拥有出色的执行效率,能够实现流畅的用户体验。
- 稳定性:从早期版本到现在,基本语法和用法保持一致,降低了学习成本和维护成本。
- 活跃的社区:在 GitHub 上拥有超过 166 万的星标,全球有大量公司在商业项目中使用,社区资源丰富,遇到问题很容易找到解决方案。
截至 2024 年 9 月,已有超过 100 万款商业应用基于 Flutter 构建。无论是小型初创公司还是大型企业,Flutter 都展现出了巨大的潜力和价值。
二、环境搭建前的准备
在开始搭建 Flutter 开发环境之前,确保你的 Windows 系统满足以下要求:
- 具备稳定的网络连接,用于下载所需的软件和工具。
- 有足够的磁盘空间,因为安装过程中会占用一定的磁盘资源。
三、搭建步骤
(一)安装 JDK
JDK(Java Development Kit)是 Java 语言的开发工具包,Flutter 开发安卓应用时需要它的支持。
- 下载 JDK:访问 JDK 官方下载页面,根据你的系统情况选择合适的版本。这里推荐使用 21 及以上版本,如 JDK 22 或 JDK 23。在 Windows 系统下,你可以选择下载 MSI 或 EXE 安装文件。
- 安装 JDK:双击下载好的安装文件,按照安装向导提示进行操作。在安装过程中,注意安装路径,默认情况下会安装到
C:\program files\java
目录下,如果 C 盘空间充足,建议保持默认路径。 - 配置环境变量:安装完成后,需要配置环境变量,让系统能够找到 JDK 的可执行文件。找到 JDK 的安装目录,进入
bin
目录,复制该目录路径。然后右键点击 “此电脑”,选择 “属性”,在弹出的窗口中点击 “高级系统设置”,接着点击 “环境变量”。在 “系统变量” 中找到 “Path” 变量,点击 “编辑”,新建一个路径,将刚才复制的 JDK 的bin
目录路径粘贴进去,点击 “确定” 保存设置。 - 验证安装:按下
Windows + R
键,打开 “运行” 对话框,输入 “CMD” 打开命令提示符。在命令提示符中输入 “java -version” 和 “javac -version”,如果能正确显示 JDK 的版本信息,说明 JDK 安装配置成功。
(二)安装 Android Studio
Android Studio 是一款专门用于 Android 开发的集成开发环境(IDE),它为 Flutter 开发提供了丰富的工具和功能支持。
- 下载 Android Studio:访问 Android Studio 官方下载页面,下载最新版本的安装文件。
- 安装 Android Studio:双击下载好的安装文件,按照安装向导提示进行操作。安装过程中,大部分选项可以保持默认设置,安装路径也可根据个人需求选择,若 C 盘空间充足,建议默认安装在 C 盘。
- 首次配置:安装完成后,启动 Android Studio。首次启动时,它会询问是否导入以前的配置,如果你是第一次安装,选择不导入。接着会出现一些配置向导,如设置代理等,一般情况下可以直接点击 “下一步” 跳过这些设置。在安装过程中,Android Studio 会自动下载一些基本的 SDK(软件开发工具包),等待下载完成。
- 安装 Dart 和 Flutter 插件:打开 Android Studio 后,点击菜单栏中的 “File” -> “Settings”(在 Mac 系统上是 “Android Studio” -> “Preferences”),在弹出的窗口中选择 “Plugins”。在插件市场中搜索 “Dart” 和 “Flutter” 插件,点击安装并重启 Android Studio,确保安装完成后在创建项目时能看到 “New Flutter Project” 选项。
(三)下载和配置 Flutter SDK
Flutter SDK 是 Flutter 开发的核心工具包,包含了 Flutter 的运行时环境、库和命令行工具等。
- 下载 Flutter SDK:访问 Flutter 官方下载页面,根据你的系统情况选择对应的版本下载。在 Windows 系统下,下载的是一个 ZIP 压缩包。
- 解压 Flutter SDK:将下载好的 ZIP 压缩包解压到你希望安装的目录,注意解压路径中不能包含中文和空格。
- 配置环境变量:找到解压后的 Flutter SDK 目录,进入
bin
目录,复制该目录路径。按照配置 JDK 环境变量的方法,在 “系统变量” 的 “Path” 变量中新建一个路径,将 Flutter SDK 的bin
目录路径粘贴进去,点击 “确定” 保存设置。 - 配置国内镜像(可选):由于网络原因,在国内下载 Flutter 依赖可能会比较慢,此时可以配置国内镜像来加速下载。在 “系统变量” 中新建两个变量:
- 变量名:
PUB_HOSTED_URL
,变量值:https://pub.flutter-io.cn
- 变量名:
FLUTTER_STORAGE_BASE_URL
,变量值:https://storage.flutter-io.cn
配置完成后,点击 “确定” 保存设置。
- 变量名:
(四)检查环境配置
安装和配置完上述工具后,需要检查 Flutter 开发环境是否搭建成功。打开命令提示符,输入 “flutter doctor” 命令,该命令会检查你的系统环境是否满足 Flutter 开发的要求,并提示可能存在的问题。正常情况下,会看到类似如下的输出:
[√] Flutter (Channel stable, 3.24.5, on Microsoft Windows [Version 10.0.19044.2486], locale zh-CN)
[√] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[√] Chrome - develop for the web
[√] Android Studio (version 2022.2)
[√] VS Code (version 1.76.2)
[√] Connected device (3 available)
如果某些项前面显示 “×”,则表示对应的环境存在问题,需要根据提示进行解决。例如,如果提示 “cmd line tools” 相关错误,可以打开 Android Studio,在 “Settings” -> “Appearance & Behavior” -> “System Settings” -> “Android SDK” -> “SDK Tools” 中勾选 “Android SDK Command - line Tools” 并安装;如果提示 “android license” 相关错误,可以在命令提示符中输入 “flutter doctor --android-licenses” 命令,然后按照提示输入 “Y” 同意所有的 Android 许可协议。
四、创建和运行 Flutter 项目
(一)在 Android Studio 中创建项目
- 打开 Android Studio,点击 “File” -> “New” -> “New Flutter Project”。
- 在弹出的窗口中,选择 “Flutter” 项目类型,然后点击 “Next”。
- 配置项目的名称、保存路径等信息,在 “Flutter SDK path” 处选择你之前配置好的 Flutter SDK 路径(注意这里选择的是 Flutter SDK 的根目录,而不是
bin
目录)。 - 根据你的项目需求,选择支持的平台(如安卓、iOS、Web、桌面等),然后点击 “Create”。
- 创建完成后,项目默认打开的是根目录,此时需要重新导入项目。点击 “File” -> “Open”,选择项目目录下的 “android” 目录,点击 “OK”。
- 第一次打开项目时,Android Studio 会自动下载 Gradle,这个过程可能需要十几分钟甚至更长时间,需要耐心等待。下载完成后,就可以进行项目的运行和调试了。
(二)运行项目到真机
- 准备一台安卓手机,打开手机的 “设置”,找到 “关于手机”,连续点击 “版本号” 多次,开启开发者选项。
- 在开发者选项中,找到 “USB 调试” 并开启,同时允许 USB 安装应用。
- 用数据线将手机连接到电脑上,确保手机和电脑连接正常。
- 在 Android Studio 中,点击 “Run” 按钮,选择你的手机设备,即可将 Flutter 项目运行到真机上。如果是第一次运行,可能需要在手机上授权安装应用,按照提示操作即可。
(三)在 VS Code 中运行项目(后期使用)
- 打开命令提示符,进入 Flutter 项目的根目录。
- 输入 “code .” 命令,在 VS Code 中打开项目。
- 在 VS Code 中,你可以对项目代码进行修改和开发。例如,打开
lib
目录下的main.dart
文件,修改应用的标题:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
// 修改这里的标题
title: 'Flutter Demo 新标题',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
- 修改完成后,在命令提示符中输入 “flutter run” 命令,即可在连接的设备上运行项目。如果要指定运行设备,可以使用 “flutter run -d [设备名称]” 命令,例如 “flutter run -d windows” 将项目运行在 Windows 桌面设备上,“flutter run -d chrome” 将项目运行在 Chrome 浏览器上。
五、总结
通过以上步骤,我们成功在 Windows 系统上搭建了 Flutter 开发环境,并实现了在 Android 设备上的项目开发和运行。Flutter 的热加载和热更新功能,让开发过程更加高效和便捷。在后续的学习和开发中,你可以进一步探索 Flutter 的各种特性和功能,打造出更加优秀的跨平台应用。希望这篇博客对你有所帮助,祝你在 Flutter 开发的道路上一帆风顺!
更多推荐
所有评论(0)