Flutter 环境搭建

以 MacOS 为例，介绍 Flutter 基础环境的搭建。

1. 安装 Flutter SDK

1.1 下载 Flutter SDK

• Flutter SDK 下载地址

1.2 配置 Flutter 环境变量

• 配置 Flutter 环境变量，将 Flutter SDK 的 bin 目录添加到系统的 PATH 环境变量中。

export PATH=$PATH:/Users/flingyp/Desktop/Flutter_Env/flutter_3.10.3/bin
export PUB_HOSTED_URL=https://pub.flutter-io.cn # 配置国内镜像（加速下载）​
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn # 配置国内镜像（加速下载）​

1.3 运行 Flutter doctor

• 打开终端，运行 flutter doctor 命令，检查 Flutter 环境是否配置正确。

2. 安装 Android Studio

• 确保安装了 Java 环境（需要在 Java17 以上版本）
• 创建安卓模拟器

3. VS Code 插件配置

之后就可以使用 VS Code 进行开发 Flutter 项目了

• Flutter
• Flutter Widget Snippets

Flutter 初始项目解读

├── lib/ # Dart源代码目录
│ ├── main.dart # 应用程序入口点，包含主要业务逻辑
│
├── android/ # Android平台相关文件
│ ├── app/ # Android应用程序目录
│ │ ├── src/
│ │ │ ├── main/
│ │ │ │ ├── AndroidManifest.xml # Android应用配置文件
│ │ │ │ └── kotlin/ # Kotlin源代码目录
│ │ │ │ └── MainActivity.kt # Android主活动
│
├── ios/ # iOS平台相关文件
│ ├── Runner/ # iOS应用程序目录
│ │ ├── AppDelegate.swift # iOS应用委托
│ │ ├── Info.plist # iOS应用配置文件
│
├── test/ # 测试目录
│ └── widget_test.dart # Widget测试示例
│
├── web/ # Web平台相关文件
│ ├── index.html # Web入口HTML文件
│ └── manifest.json # Web应用配置文件
│
├── pubspec.yaml # 项目依赖配置文件
└── README.md # 项目说明文档

main.dart 入口文件

import 'package:flutter/material.dart';

void main() {
  // 这是应用程序的入口点，runApp函数接收一个widget作为参数，它将成为widget树的根。
  runApp(const MyApp());
}

// MyApp是一个StatelessWidget（无状态组件）
// 它设置了应用的基本主题和整体结构
// MaterialApp 是一个重要的widget，提供了许多Material Design的基础功能
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 Page22'),
    );
  }
}

// 主页面 (MyHomePage) MyHomePage是一个StatefulWidget（有状态组件）
// 状态组件分为两个部分：MyHomePage：定义组件的配置、_MyHomePageState：维护组件的状态
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // _counter是一个状态变量
  int _counter = 0;

  // setState用于更新状态，每次调用都会触发重建(rebuild)
  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),
      ),
    );
  }
}