从0到1掌握Flutter（二）环境搭建与认识工程

引文

接上篇从0到1掌握Flutter（一）Flutter与移动端跨平台

本文基于Windows系统进行演示，绍了 Flutter 开发环境的配置过程，包括安装依赖、下载 Flutter SDK、配置环境变量以及检查环境等步骤，认识了 Flutter 工程的目录结构和主要文件，搭建跨平台应用的基础框架。

一、环境搭建

1.1 开发工具

💡 Git

Flutter SDK版本管理与依赖更新需要依赖Git工具实现，是构建开发环境的必要前置条件。在新设备配置开发环境时，可以按照以下流程进行安装验证：

1. 访问Git官方下载中心下载安装包，并安装。

2. 安装后，命令行输入（Windows CMD/PowerShell 或 macOS 终端通用）git --version 如果提示git version 2.39.2 (Apple Git-143)表示Git环境已正确安装并配置。

💡 Android Studio

Android Studio是Google 官方推荐的开发工具， 提供完整的 Flutter 开发支持，包括插件管理、模拟器调试、原生代码编译等。

要求安装Android Studio 2024.1.1 (Koala) 或更高版本来调试和编译 Android 的 Java 或 Kotlin 代码。

可以访问Android Studio 中国区镜像站 或 国际版官网 下载安装。

💡 Flutter插件

安装完成后，在启动首页点击 Plugins，在Marketplace中搜索Flutter插件并安装。

该插件可以提升 Flutter 开发效率，简化复杂操作。以下是其核心功能：

• 快速生成标准 Flutter 工程结构（含基础应用、模块化应用、包/插件项目模板）

• 语法高亮，区分 Widget、Dart 关键字、字符串等代码元素、自动补全、语法诊断等

• 热重载：修改代码后保存即可实时刷新运行中的应用

• 设备与模拟器控制：支持多设备并行调试，同时连接 Android 手机、iOS 模拟器、Web 浏览器

• UI 层级分析，可视化查看 Widget 树结构

注意：需要启用Android APK Support插件，如果没有开启，Android Studio 将没有创建Flutter工程的入口。

1.2 FluterSDK安装

💡 SDK包获取

访问Flutter官网安装指南选择自己设备的SDK下载并解压。Flutter SDK 包含了 Flutter 开发所需的工具、库和文档。

不要将 Flutter 安装到以下情况的目录或路径中：

• 路径包含特殊字符或空格。

• 路径需要较高的权限。

1.2 环境变量配置

SDK安装完成后，需要将 Flutter 添加到 PATH 环境变量后，才能在 PowerShell 中运行 Flutter。指假定你在 %USERPROFILE%\dev\flutter 中安装了 Flutter SDK。

1. 在设置页打开 系统 > 系统信息 的窗口。
2. 单击 高级系统设置 > 高级 > 环境变量
3. 在 username 用户变量 的部分中，找到 Path 条目。
4. 如果存在该条目，请双击它，显示 编辑环境变量 的窗口。
5. 双击空白行。输入 %USERPROFILE%\dev\flutter\bin。
6. 如果条目不存在，请单击 新建， 在 变量名 框中，输入 Path。在 变量值 框中，输入 %USERPROFILE%\dev\flutter\bin。
7. 点击各个窗口的确定

1.3 环境诊断

当环境配好以后，可以通过下面的方式验证环境配置是否正确

命令行输入执行：

flutter --version

如果输出了版本信息表示Flutter环境配置成功

然后我们可以使用flutter doctor 检查其他环境是否完善。这个命令会检查系统上的各种依赖是否安装正确，并给出相应的提示信息。如果存在问题，按照提示信息进行相应的解决即可。

命令行输入执行：

flutter doctor

典型输出结构如下：

[!] Android toolchain - develop for Android devices  
    ✗ Android licenses not accepted  
[✓] Chrome - develop for the web  
[!] Android Studio (version 2022.3)  
    ✗ Unable to find bundled Java version  
[✓] Connected device (1 available)  

可以看到有三种不同的输出状态：

• ✓ 绿色对勾：组件已就绪，保持现状即可

• ! 黄色感叹号：存在可优化项，选择性处理，影响开发体验

• ✗ 红色叉号：必须修复的阻断性问题，影响编译能力

对于阻断性问题，系统会输出详细的诊断日志，结构如下：

[组件类别] • [检查项] (状态) [具体描述] [修复建议]

[X] Visual Studio - develop for Windows
    X Visual Studio not installed; this is necessary for Windows development.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components

二、Flutter工程创建

2.1 创建工程

当我们在Android Studio中完成Kotlin插件配置后（详见1.1节），IDE顶部工具栏多了一个"New Flutter Project"按钮，这就是创建Flutter工程的入口。点击他就可以创建一个Flutter工程。

首次创建工程时需手动指定Flutter SDK路径，选择flutter/bin上级目录即可。（如/Users/name/flutter）选择后点击Next。

最后然后输入工程名、包名，注意名称中不能包含大写字母。选择语言，以及需要支持的端，这里选择Android和iOS，点击Creat，等待IDE创建工程即可。

此时IDE会自动打开main.dart文件，开发者可直接运行到设备查看初始界面。

2.2 工程结构

创建好 Flutter 工程后，让我们来了解一下它的目录结构。 在Android Studio的工程面板中，有这几个主要的部分。

目录/文件	作用描述
android/	安卓原生工程文件
ios/	iOS原生工程文件
lib/	Dart源码目录（主开发区域）
pubspec.yaml	依赖管理文件
test/	单元测试代码

• android 目录：这个目录包含了与 Android 平台相关的代码和资源。如果你想对 Android 平台进行特定的定制，比如添加原生代码、修改 Android Manifest 文件等，都可以在这里进行操作。
• ios 目录：与"android"目录类似，"ios"目录存放着与 iOS 平台相关的代码和资源。用于对 iOS 平台进行定制，例如添加原生 Objective - C 或 Swift 代码等。
• lib 目录："lib"目录是 Flutter 工程的核心代码目录。我们编写的 Dart 代码都存放在这里，包括页面布局、业务逻辑、数据处理等功能的实现。"main.dart"文件是整个工程的入口点，程序从这里开始执行。
• test 目录："test"目录用于存放测试代码。编写测试代码可以帮助我们确保应用的功能正确性，提高代码的可靠性和可维护性。在这个目录下，你可以使用 Flutter 提供的测试框架来编写单元测试和集成测试。
• pubspec.yaml 文件："pubspec.yaml"文件是 Flutter 工程的配置文件。在这里，我们可以声明项目的依赖项，包括 Flutter 插件、Dart 库等。还可以配置项目的名称、版本、作者等信息。通过这个文件，我们可以方便地管理项目的依赖关系和元数据。

💡 主要文件

1. main.dart

"main.dart"文件是 Flutter 应用的入口点。它包含一个名为"main"的顶级函数，这个函数是应用启动时首先执行的代码。在"main"函数中，我们通常会调用"runApp"函数，并传入一个根 Widget。例如IDE自动为我们创建的默认Demo：

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'),
    );
  }
}

//....

我们在顶部设备栏选择需要运行的设备，然后直接点击运行按钮，就可以运行。可以在看各个平台的效果。

页面顶部显示着'Flutter Demo'标题栏，中央区域包含提示文字和一个醒目的数字计数器，右下角的蓝色圆形按钮格外显眼。每次点击按钮计数器上的数字就会+1。

可以看到在手机、网页等不同设备上，按钮的点击反馈、文字的排版布局、数字的放大效果都保持高度统一，无需任何额外设置即可实现多端一致的显示效果。

下面是在web上运行与在Android手机上运行的效果：

2. pubspec.yaml

如前文所述，"pubspec.yaml"文件用于管理项目的依赖和元数据。下面是IDE自动为我们创建的"pubspec.yaml"文件示例：

name: my_flutter_app 
description: A new Flutter application. 
version: 1.0.0 
environment: 
  sdk: ">=2.10.0 <3.0.0" 
dependencies: 
  flutter: 
    sdk: flutter 
  cupertino_icons: ^1.0.2 
dev_dependencies: 
  flutter_test: 
    sdk: flutter 
flutter: 
  uses-material-design: true 

这个文件中定义了项目的名称、描述、版本等信息。在"dependencies"部分，声明了项目依赖的 Flutter 库和插件，这里依赖了"cupertino_icons"插件用于在 iOS 风格的应用中使用图标。在"dev_dependencies"部分，声明了开发过程中使用的依赖，例如"flutter_test"用于编写测试代码。最后，"flutter"部分配置了应用使用 Material Design 风格。

三、总结

通过以上内容，我们了解了 Flutter 开发环境的配置过程，包括安装依赖、下载 Flutter SDK、配置环境变量以及检查环境等步骤，认识了 Flutter 工程的目录结构和主要文件。

在后续的文章中，我们将基于这个配置好的环境和工程结构，进一步学习 Flutter。让我们一起期待在 Flutter 开发的道路上不断前。