1.安装 Flutter 开发环境

开发环境：Mac

1.1 下载sdk

https://docs.flutter.cn/release/archive?tab=macos 将下载的 SDK 解压到本地目

中文文档：https://docs.flutter.cn/community/china/

1.2 环境变量配置

// 1. 打开配置文件
open ~/.zshrc 

// 若不存在此文件，则直接新创建再打开即可，终端输入：
cd ~
touch .zshrc
open ~/.zshrc

// 2. 在打开的配置文件下添加以下语句 & 保存

export PATH="/Users/a58/Flutter/bin:$PATH" // 注：/Users/a58/Flutter/bin 修改成你刚才解压flutter SDK的目录
export PUB_HOSTED_URL="https://pub.flutter-io.cn"
export FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"
// 3. 生效配置
source ~/.zshrc

1.3 验证安装

在终端或命令提示符中，输入以下命令验证 Flutter 是否安装成功：

flutter doctor

flutter doctor 将检查你的 Flutter 安装状态，包括 Android Studio、Xcode 等开发工具。如果有需要修复的项目，按照提示进行修复。

2. 安装开发工具

2.1 安装 IDE

选择一个开发环境来编写和运行 Flutter 代码：

Android Studio：官方推荐的 IDE，支持 Flutter 插件。
VS Code：轻量级编辑器，需要手动安装 Flutter 插件。

在 Android Studio 中安装 Flutter 插件

打开 Android Studio，选择 File > Settings > Plugins，搜索 Flutter 并安装。
插件会自动安装 Dart 插件。

在 VS Code 中安装 Flutter 插件

打开 VS Code，点击扩展（Extensions）图标。
搜索 Flutter 并安装，同时会安装 Dart 插件。

2.2 安装模拟器（可选）

Android Emulator：Android Studio 自带虚拟设备管理器（AVD Manager），可以用于模拟 Android 设备。
iOS Simulator：如果使用 macOS 和 Xcode，你可以运行 iOS 模拟器。

3. 创建 Flutter 项目

使用命令行创建新的 Flutter 项目：

flutter create my_project

此命令会生成一个新的 Flutter 项目，包含以下目录结构：

my_project/
├── android/        # Android 平台的代码
├── ios/            # iOS 平台的代码
├── lib/            # 项目的主要 Dart 代码
│   └── main.dart   # 应用的入口文件
├── test/           # 测试代码
├── pubspec.yaml    # 项目依赖管理文件

进入项目目录：

cd my_project

4. 编写 Flutter 代码

Flutter 应用的入口文件位于 lib/main.dart，默认的代码已经生成了一个简单的计数器应用。打开 main.dart，你可以看到一个 MyApp 类，它继承自 StatelessWidget 或 StatefulWidget。

以下是一个简单的 Flutter 应用代码，它展示了一个文本 “Hello, Flutter!”:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

5. 运行 Flutter 项目

5.1 使用命令行运行

连接一个 Android 或 iOS 设备，或启动模拟器，然后在终端中运行：

flutter run

// 1.1 启用 Web 支持
flutter config --enable-web
flutter run -d chrome

// 确认 Flutter 支持哪些设备（包括 Web 浏览器）
flutter devices

5.2 使用 IDE 运行

Android Studio：打开项目后，点击工具栏上的绿色 “Run” 按钮。
VS Code：按 F5 运行项目。

6. 项目结构介绍

lib/main.dart：应用的入口文件，包含应用逻辑和界面布局。
pubspec.yaml：项目的配置文件，用于管理依赖包、图片、字体等资源。

你可以在 pubspec.yaml 文件中定义项目需要的外部依赖（比如插件）：

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2  # iOS 风格的图标库

运行以下命令来获取新的依赖包：

flutter pub get

7. 添加页面和功能

7.1 创建新的页面

你可以通过创建新的 StatefulWidget 或 StatelessWidget 来添加页面。

例如，创建一个新的 Dart 文件 lib/new_page.dart，其中定义一个简单的页面：

import 'package:flutter/material.dart';

class NewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('New Page'),
      ),
      body: Center(
        child: Text('Welcome to the new page!'),
      ),
    );
  }
}

然后在 main.dart 中添加导航到新页面的功能：

import 'package:flutter/material.dart';
import 'new_page.dart';  // 导入新页面

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 导航到新页面
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => NewPage()),
              );
            },
            child: Text('Go to New Page'),
          ),
        ),
      ),
    );
  }
}