第一个Flutter应用

封面图 • 2025-10-14 • Flutter

创建第一个 Flutter 应用是一个很好的开始！以下是使用 **Flutter** 创建一个简单“Hello World”应用的步骤，适用于 **Windows、macOS 或 Linux** 系统。

---

## ✅ 步骤 1：安装 Flutter SDK

如果你还没有安装 Flutter，请按照以下步骤进行：

### 1. 下载 Flutter SDK
访问 [Flutter 官网](https://flutter.dev/docs/get-started/install) 并下载适合你系统的版本。

### 2. 解压并配置环境变量
将解压后的 `flutter` 文件夹添加到系统 PATH 中。

### 3. 验证安装
打开终端（或命令提示符）并运行：

```bash
flutter --version
```

如果看到 Flutter 版本信息，说明安装成功。

---

## ✅ 步骤 2：安装 Android Studio 或 VS Code（可选）

虽然你可以用任何文本编辑器编写 Flutter 代码，但推荐使用：

- **Android Studio**（自带 Flutter 插件）
- **VS Code**（安装 Flutter 和 Dart 插件）

---

## ✅ 步骤 3：创建第一个 Flutter 项目

### 方法一：使用命令行

在终端中执行以下命令：

```bash
flutter create my_first_app
```

这会创建一个名为 `my_first_app` 的文件夹，并包含 Flutter 项目的结构。

进入项目目录：

```bash
cd my_first_app
```

### 方法二：使用 Android Studio 或 VS Code

在 IDE 中选择 “New Flutter Project”，然后选择 “Application”。

---

## ✅ 步骤 4：运行应用

### 连接设备或模拟器

确保你有一个设备连接（真机或模拟器），或者启动模拟器：

```bash
flutter devices
```

### 运行应用

```bash
flutter run
```

你会看到一个简单的 Flutter 应用界面，显示 “Hello, world!”。

---

## ✅ 步骤 5：查看代码

打开 `lib/main.dart` 文件，这是你的主程序文件。默认内容如下：

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

final String title;

@override
  _MyHomePageState 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>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}
```

---

## 🎉 小结

你现在已经：

- 安装了 Flutter
- 创建了一个 Flutter 项目
- 运行了第一个 Flutter 应用
- 查看了代码结构

接下来可以尝试：

- 添加按钮和交互
- 使用 `Text`, `Container`, `Row`, `Column` 等组件
- 学习 Flutter 的状态管理（如 `setState`）

---

需要我帮你扩展这个应用吗？比如添加一个计数器、按钮、或者页面导航？