第一课：Flutter环境搭建与第一个应用 - 从零到一

安卓开发者2025-12-12 14:39

一、前言：为什么选择Flutter？

在正式开始之前，我们先了解一下为什么Flutter会成为跨平台开发的首选框架：

  • 一次编写，多端运行：iOS、Android、Web、Desktop全支持

  • 高性能：自绘引擎，媲美原生的60fps流畅体验

  • 热重载：开发效率提升300%，实时看到修改效果

  • 丰富的UI组件：Material和Cupertino两大设计体系

现在，让我们开始搭建开发环境吧！

二、环境搭建全攻略

2.1 系统要求

  • 操作系统：Windows 10/11、macOS、Linux

  • 磁盘空间：至少2.8GB可用空间

  • 工具：Git、文本编辑器/IDE

2.2 Windows环境搭建步骤

步骤1：安装Flutter SDK

powershell

复制

下载

复制代码 
# 1. 下载Flutter SDK（建议使用国内镜像）
# 官方地址：https://flutter.dev/docs/get-started/install
# 国内镜像：https://flutter.cn/docs/get-started/install

# 2. 解压到指定目录，例如：C:\src\flutter

# 3. 将Flutter添加到环境变量PATH
# 右键"此电脑" -> 属性 -> 高级系统设置 -> 环境变量
# 在用户变量PATH中添加：C:\src\flutter\bin
步骤2：安装Android Studio（Android开发）

  1. 下载并安装 Android Studio

  2. 启动后安装Android SDK：

    • 打开"SDK Manager"

    • 勾选Android SDK（建议选择API 30以上）

    • 勾选Android SDK Platform-Tools

    • 勾选Android SDK Build-Tools

  3. 配置Android环境变量：

powershell

复制

下载

复制代码 
# 新增系统变量
ANDROID_HOME = C:\Users\你的用户名\AppData\Local\Android\Sdk

# 在PATH中添加
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\tools
%ANDROID_HOME%\emulator
步骤3：安装Visual Studio Code（推荐编辑器）

  1. 下载 VS Code

  2. 安装Flutter插件：

    • 打开Extensions（Ctrl+Shift+X）

    • 搜索并安装"Flutter"

    • 搜索并安装"Dart"

2.3 macOS环境搭建

bash

复制

下载

复制代码 
# 1. 使用Homebrew安装（最简单的方式）
brew install --cask flutter

# 2. 或者手动下载
# 下载后解压到 ~/development/flutter

# 3. 配置环境变量
echo 'export PATH="$PATH:$HOME/development/flutter/bin"' >> ~/.zshrc
source ~/.zshrc

# 4. 安装Xcode（iOS开发必需）
# 从App Store安装Xcode
xcode-select --install

# 5. 同意Xcode协议
sudo xcodebuild -license accept

2.4 运行Flutter Doctor（环境检查）

打开终端/命令提示符，运行：

bash

复制

下载

复制代码 
flutter doctor

你会看到类似下面的输出，绿色对勾✅表示通过：

text

复制

下载

复制代码 
[✓] Flutter (Channel stable, 3.16.0, on macOS 14.0 23A344 darwin-arm64, locale zh-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.0)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.3)
[✓] VS Code (version 1.84.0)
[✓] Connected device (2 available)
[!] HTTP Host Availability
    ✗ HTTP host https://maven.google.com/ is not reachable. Reason: An error occurred while checking the HTTP host

解决常见问题：

  • Android许可未接受 ：运行 flutter doctor --android-licenses

  • 设备未连接：连接Android手机或启动模拟器

  • 镜像配置问题（国内用户需要）：

bash

复制

下载

复制代码 
# 设置国内镜像
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

# Windows用户可以在环境变量中添加

三、创建第一个Flutter应用

3.1 使用命令行创建项目

bash

复制

下载

复制代码 
# 1. 创建一个新的Flutter项目
flutter create my_first_app

# 2. 进入项目目录
cd my_first_app

# 3. 运行项目
# 连接Android手机或启动模拟器后运行：
flutter run

3.2 使用VS Code创建项目

  1. 打开VS Code，按 Ctrl+Shift+P

  2. 输入 "Flutter: New Project"

  3. 选择 "Application"

  4. 输入项目名称：my_first_app

  5. 选择保存位置

  6. 按F5或点击运行按钮启动

3.3 项目结构详解

text

复制

下载

复制代码 
my_first_app/
├── android/          # Android原生代码
├── ios/              # iOS原生代码
├── lib/              # Flutter代码主目录
│   └── main.dart     # 应用入口文件
├── test/             # 测试文件
├── pubspec.yaml      # 项目配置文件（依赖管理）
└── README.md

四、理解第一个Flutter应用代码

打开 lib/main.dart，让我们分析默认生成的代码：

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(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      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(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        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.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

4.1 代码解析

1. 入口函数 main()

dart

复制

下载

复制代码 
void main() {
  runApp(const MyApp());
}

  • 每个Flutter应用都需要一个 main() 函数

  • runApp() 将根Widget绑定到屏幕上

2. StatelessWidget 与 StatefulWidget

  • MyApp 继承自 StatelessWidget：静态界面

  • MyHomePage 继承自 StatefulWidget：有状态变化的界面

3. MaterialApp 和 Scaffold

  • MaterialApp：Material Design风格的应用框架

  • Scaffold：页面脚手架，提供AppBar、Body、FloatingActionButton等

4. 状态管理 setState()

dart

复制

下载

复制代码 
void _incrementCounter() {
  setState(() {
    _counter++;
  });
}

  • 调用 setState() 通知框架状态已改变

  • 框架会重新调用 build() 方法重建界面

五、动手改造：创建你的第一个自定义应用

让我们修改代码，创建一个简单的登录界面：

dart

复制

下载

复制代码 
import 'package:flutter/material.dart';

void main() {
  runApp(const MyFirstApp());
}

class MyFirstApp extends StatelessWidget {
  const MyFirstApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '我的第一个Flutter应用',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const LoginPage(),
    );
  }
}

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _login() {
    String username = _usernameController.text;
    String password = _passwordController.text;
    
    if (username.isNotEmpty && password.isNotEmpty) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text('欢迎回来，$username！'),
          duration: const Duration(seconds: 2),
        ),
      );
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text('请输入用户名和密码'),
          backgroundColor: Colors.red,
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('用户登录'),
        centerTitle: true,
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 应用Logo
            const Icon(
              Icons.account_circle,
              size: 80,
              color: Colors.blue,
            ),
            const SizedBox(height: 30),
            
            // 用户名输入框
            TextField(
              controller: _usernameController,
              decoration: const InputDecoration(
                labelText: '用户名',
                hintText: '请输入用户名',
                prefixIcon: Icon(Icons.person),
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 20),
            
            // 密码输入框
            TextField(
              controller: _passwordController,
              obscureText: true,
              decoration: const InputDecoration(
                labelText: '密码',
                hintText: '请输入密码',
                prefixIcon: Icon(Icons.lock),
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 30),
            
            // 登录按钮
            SizedBox(
              width: double.infinity,
              height: 50,
              child: ElevatedButton(
                onPressed: _login,
                style: ElevatedButton.styleFrom(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10),
                  ),
                ),
                child: const Text(
                  '登录',
                  style: TextStyle(fontSize: 18),
                ),
              ),
            ),
            
            // 注册链接
            TextButton(
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(
                    content: Text('跳转到注册页面'),
                  ),
                );
              },
              child: const Text('还没有账号？立即注册'),
            ),
          ],
        ),
      ),
    );
  }
}

六、热重载：开发效率的秘密武器

6.1 什么是热重载？

  • 保存代码后立即看到变化

  • 保持应用状态（比如输入框中的文字）

  • 快速迭代UI设计

6.2 如何使用热重载？

  1. 在终端运行 flutter run

  2. 在VS Code中按 F5 运行

  3. 修改代码后：

    • 终端中按 r 键

    • VS Code中点击闪电图标⚡

    • 保存文件自动热重载（需设置）

6.3 热重载 vs 热重启

  • 热重载（Hot Reload）：快速，保持状态

  • 热重启 （Hot Restart）：重置状态，按 R 键

七、运行到不同设备

7.1 连接Android设备

bash

复制

下载

复制代码 
# 查看连接的设备
flutter devices

# 运行到指定设备
flutter run -d <设备ID>

7.2 启动Android模拟器

bash

复制

下载

复制代码 
# 查看可用模拟器
flutter emulators

# 启动模拟器
flutter emulators --launch <模拟器名称>

# 或者直接通过Android Studio启动

7.3 运行到iOS模拟器（仅macOS）

bash

复制

下载

复制代码 
# 启动iOS模拟器
open -a Simulator

# 运行Flutter应用
flutter run

八、常见问题解决

Q1: flutter doctor显示Android许可未接受

bash

复制

下载

复制代码 
flutter doctor --android-licenses
# 一直按y接受所有许可

Q2: 国内下载速度慢

bash

复制

下载

复制代码 
# 设置环境变量
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

Q3: 模拟器无法启动

  • 确保已安装Intel HAXM（Intel CPU）

  • 确保Hyper-V已禁用（Windows）

  • 尝试重启电脑

Q4: iOS证书问题

  • 确保Xcode已安装并打开过一次

  • 确保Apple Developer账号配置正确

九、作业与实践

作业1：完成环境搭建

  1. 成功运行 flutter doctor 且所有项目都是✅

  2. 创建并运行默认计数器应用

作业2：改造登录页面

在刚才创建的登录页面基础上：

  1. 添加"记住密码"复选框

  2. 添加"忘记密码"链接

  3. 修改主题颜色为绿色系

作业3：创建个人名片应用

创建一个显示个人信息的应用，包含：

  • 头像（使用Icon或网络图片）

  • 姓名、职位、联系方式

  • 技能标签列表

  • 一个"联系我"按钮

十、下一步学习建议

  1. 熟悉Dart语言：掌握基础语法和面向对象编程

  2. 理解Widget树：学习布局和组件的嵌套关系

  3. 尝试更多组件：按钮、列表、对话框等

  4. 查看官方文档 ：https://flutter.dev/docs

恭喜你！你已经成功搭建了Flutter开发环境并创建了第一个应用。记住，学习Flutter最好的方式就是多动手实践。在下一课中，我们将深入学习Dart语言基础。

相关推荐
豫狮恒2 小时前
OpenHarmony Flutter 分布式数据共享实战：从基础存储到跨设备协同
flutter·wpf·openharmony
L、2182 小时前
Flutter 与开源鸿蒙（OpenHarmony）：跨平台开发的新未来
flutter·华为·开源·harmonyos
L、2183 小时前
Flutter 与 OpenHarmony 深度融合实践：打造跨生态高性能应用（进阶篇）
javascript·flutter·华为·智能手机·harmonyos
鹏多多3 小时前
Flutter输入框TextField的属性与实战用法全面解析+示例
android·前端·flutter
安卓开发者3 小时前
第二课：Dart语言快速入门 - Flutter开发的基石
flutter
雨季6664 小时前
Flutter 智慧医疗服务平台：跨端对话框组件设计与实现
flutter
一个假的前端男4 小时前
Flutter环境安装
flutter
500844 小时前
鸿蒙 Flutter 隐私合规：用户授权中心与数据审计日志
flutter·华为·开源·wpf·音视频
子春一5 小时前
Flutter 2025 测试策略全景：从单元测试到混沌工程，构建坚不可摧的高质量应用
flutter·架构
热门推荐
01GitHub 镜像站点02【AutoGLM部署】本地私有化部署AI手机Agent03UV安装并设置国内源04【超详细教程】手把手教你从微软官网免费下载Windows 10官方原版ISO镜像（2025最新版）05Open-AutoGLM Windows 安装部署教程06Cursor 又偷偷更新，这个功能太实用：Visual Editor for Cursor Browser07安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）08Linux下V2Ray安装配置指南09BongoCat - 跨平台键盘猫动画工具10在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）