第一课：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语言基础。

相关推荐
Geek_Vison5 小时前
保险APP已经用了Flutter，还能接入小程序吗？
flutter·小程序·uni-app·mpaas·小程序容器
FungLeo5 小时前
成为全栈·Flutter App 篇·go_router 与四 Tab App Shell：保留导航状态、深链和登录回跳
flutter·移动开发·成为全栈·go_router·路由设计·深链接
m0_738185826 小时前
Flutter 鸿蒙化实战：screen_protector 适配 OpenHarmony，防截屏/防泄露
flutter·华为·harmonyos·鸿蒙
梦想的颜色11 小时前
【编程实战】AI 时代 APP 开发全栈硬核指南：技术选型 + AI 架构 + 模型落地全维度决策
python·flutter·react native·react.js·ai·桌面应用·milvus
yuanlaile1 天前
2026年全新Flutter 跨平台开发全栈学习资料整理
flutter·getx·鸿蒙 next·flutter开发鸿蒙·flutter入门实战·flutter全栈
恋猫de小郭2 天前
Genkit Dart 1.0 发布，Flutter 原生的 AI Agent 终于完整了
android·前端·flutter
第10086个小白2 天前
flutter桌面端打包方式(Inno Setup Compiler）版本
前端·flutter
陆断枫2 天前
Flutter 3.47 动画引擎盘点：Impeller 全平台，和那些"新特性"
flutter
程序员老刘2 天前
Flet 1.0 思路很好，可惜来晚了
flutter·ai编程·客户端
m0_738185823 天前
Flutter 鸿蒙化实战：qr_code_scanner_plus 适配 OpenHarmony，二维码扫描
flutter·华为·harmonyos·鸿蒙
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02如何新建文件夹？ 电脑新建文件夹的4种方法03历年考研数学一、数学二、数学三真题试卷及答案PDF04GitHub 镜像站点05「全语录+省流版」邵艾伦 × 孙宇晨：聊风口、聊个人IP、聊年轻人如何抓住 AI 时代的机会06蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接07轻量化AI渗透武器库｜ARTEX自主攻防系统、资产梳理、漏洞挖掘、链路分析全流程智能化落地08Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）09Telegram APK 下载安装完整指南 — 2026年最新10微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新