雁过留声 发表于 2025-4-19 11:35:42

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

目次
从 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 开发安卓应用时需要它的支持。


[*]下载 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 , 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 开发的门路上一帆风顺!

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: 从 0 到 1 搭建 Flutter 开发环境:Windows+Android 篇