目录

从 0 到 1 搭建 Flutter 开发环境:Windows+Android 篇

一、Flutter 框架简介

二、环境搭建前的准备

三、搭建步骤

(一)安装 JDK

(二)安装 Android Studio

(三)下载和配置 Flutter SDK

(四)检查环境配置

四、创建和运行 Flutter 项目

(一)在 Android Studio 中创建项目

(二)运行项目到真机

(三)在 VS Code 中运行项目(后期使用)

五、总结


在移动应用和跨平台开发领域,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 开发安卓应用时需要它的支持。

  1. 下载 JDK:访问 JDK 官方下载页面,根据你的系统情况选择合适的版本。这里推荐使用 21 及以上版本,如 JDK 22 或 JDK 23。在 Windows 系统下,你可以选择下载 MSI 或 EXE 安装文件。
  2. 安装 JDK:双击下载好的安装文件,按照安装向导提示进行操作。在安装过程中,注意安装路径,默认情况下会安装到C:\program files\java目录下,如果 C 盘空间充足,建议保持默认路径。
  3. 配置环境变量:安装完成后,需要配置环境变量,让系统能够找到 JDK 的可执行文件。找到 JDK 的安装目录,进入bin目录,复制该目录路径。然后右键点击 “此电脑”,选择 “属性”,在弹出的窗口中点击 “高级系统设置”,接着点击 “环境变量”。在 “系统变量” 中找到 “Path” 变量,点击 “编辑”,新建一个路径,将刚才复制的 JDK 的bin目录路径粘贴进去,点击 “确定” 保存设置。
  4. 验证安装:按下Windows + R键,打开 “运行” 对话框,输入 “CMD” 打开命令提示符。在命令提示符中输入 “java -version” 和 “javac -version”,如果能正确显示 JDK 的版本信息,说明 JDK 安装配置成功。

(二)安装 Android Studio

Android Studio 是一款专门用于 Android 开发的集成开发环境(IDE),它为 Flutter 开发提供了丰富的工具和功能支持。

  1. 下载 Android Studio:访问 Android Studio 官方下载页面,下载最新版本的安装文件。
  2. 安装 Android Studio:双击下载好的安装文件,按照安装向导提示进行操作。安装过程中,大部分选项可以保持默认设置,安装路径也可根据个人需求选择,若 C 盘空间充足,建议默认安装在 C 盘。
  3. 首次配置:安装完成后,启动 Android Studio。首次启动时,它会询问是否导入以前的配置,如果你是第一次安装,选择不导入。接着会出现一些配置向导,如设置代理等,一般情况下可以直接点击 “下一步” 跳过这些设置。在安装过程中,Android Studio 会自动下载一些基本的 SDK(软件开发工具包),等待下载完成。
  4. 安装 Dart 和 Flutter 插件:打开 Android Studio 后,点击菜单栏中的 “File” -> “Settings”(在 Mac 系统上是 “Android Studio” -> “Preferences”),在弹出的窗口中选择 “Plugins”。在插件市场中搜索 “Dart” 和 “Flutter” 插件,点击安装并重启 Android Studio,确保安装完成后在创建项目时能看到 “New Flutter Project” 选项。

(三)下载和配置 Flutter SDK

Flutter SDK 是 Flutter 开发的核心工具包,包含了 Flutter 的运行时环境、库和命令行工具等。

  1. 下载 Flutter SDK:访问 Flutter 官方下载页面,根据你的系统情况选择对应的版本下载。在 Windows 系统下,下载的是一个 ZIP 压缩包。
  2. 解压 Flutter SDK:将下载好的 ZIP 压缩包解压到你希望安装的目录,注意解压路径中不能包含中文和空格。
  3. 配置环境变量:找到解压后的 Flutter SDK 目录,进入bin目录,复制该目录路径。按照配置 JDK 环境变量的方法,在 “系统变量” 的 “Path” 变量中新建一个路径,将 Flutter SDK 的bin目录路径粘贴进去,点击 “确定” 保存设置。
  4. 配置国内镜像(可选):由于网络原因,在国内下载 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 中创建项目

  1. 打开 Android Studio,点击 “File” -> “New” -> “New Flutter Project”。
  2. 在弹出的窗口中,选择 “Flutter” 项目类型,然后点击 “Next”。
  3. 配置项目的名称、保存路径等信息,在 “Flutter SDK path” 处选择你之前配置好的 Flutter SDK 路径(注意这里选择的是 Flutter SDK 的根目录,而不是bin目录)。
  4. 根据你的项目需求,选择支持的平台(如安卓、iOS、Web、桌面等),然后点击 “Create”。
  5. 创建完成后,项目默认打开的是根目录,此时需要重新导入项目。点击 “File” -> “Open”,选择项目目录下的 “android” 目录,点击 “OK”。
  6. 第一次打开项目时,Android Studio 会自动下载 Gradle,这个过程可能需要十几分钟甚至更长时间,需要耐心等待。下载完成后,就可以进行项目的运行和调试了。

(二)运行项目到真机

  1. 准备一台安卓手机,打开手机的 “设置”,找到 “关于手机”,连续点击 “版本号” 多次,开启开发者选项。
  2. 在开发者选项中,找到 “USB 调试” 并开启,同时允许 USB 安装应用。
  3. 用数据线将手机连接到电脑上,确保手机和电脑连接正常。
  4. 在 Android Studio 中,点击 “Run” 按钮,选择你的手机设备,即可将 Flutter 项目运行到真机上。如果是第一次运行,可能需要在手机上授权安装应用,按照提示操作即可。

(三)在 VS Code 中运行项目(后期使用)

  1. 打开命令提示符,进入 Flutter 项目的根目录。
  2. 输入 “code .” 命令,在 VS Code 中打开项目。
  3. 在 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),
      ),
    );
  }
}

  1. 修改完成后,在命令提示符中输入 “flutter run” 命令,即可在连接的设备上运行项目。如果要指定运行设备,可以使用 “flutter run -d [设备名称]” 命令,例如 “flutter run -d windows” 将项目运行在 Windows 桌面设备上,“flutter run -d chrome” 将项目运行在 Chrome 浏览器上。

五、总结

通过以上步骤,我们成功在 Windows 系统上搭建了 Flutter 开发环境,并实现了在 Android 设备上的项目开发和运行。Flutter 的热加载和热更新功能,让开发过程更加高效和便捷。在后续的学习和开发中,你可以进一步探索 Flutter 的各种特性和功能,打造出更加优秀的跨平台应用。希望这篇博客对你有所帮助,祝你在 Flutter 开发的道路上一帆风顺!

Logo

2万人民币佣金等你来拿,中德社区发起者X.Lab,联合德国优秀企业对接开发项目,领取项目得佣金!!!

更多推荐