作为跨平台开发的热门框架，Flutter 的项目初始化与主题搭建是入门的核心步骤。本文带你从创建 Flutter 项目开始，快速接入 Material Design 3（以下简称 MD3）主题，打造符合现代设计风格的应用基础。

一、创建 Flutter 项目

1. 前置条件

确保已安装：

• Flutter SDK（建议 3.10 + 版本，MD3 支持更完善）
• 开发工具（Android Studio/VS Code）
• 对应平台的编译环境（Android SDK/iOS Xcode）

2. 命令行创建项目

在对应项目路径打开终端，执行以下命令（md3_flutter_demo为项目名）：

flutter create md3_flutter_demo
cd md3_flutter_demo

若需指定语言（如仅用 Dart），可添加参数

flutter create -i objc -a java md3_flutter_demo

3. 运行初始项目

进入项目目录后，连接模拟器 / 真机，在对应根目录打开终端执行：

flutter run

此时会看到 Flutter 默认的计数器 Demo，说明项目创建成功。

二、搭建 Material Design 3 主题

Flutter 3.10 + 已原生支持 MD3，无需额外依赖，可直接通过ThemeData配置。

1. 核心配置思路

MD3 的核心是动态色彩 + 组件风格统一，我们通过ThemeData(useMaterial3: true)开启 MD3 模式，再自定义色彩、字体等属性。

2. 完整主题配置代码

在VScode（小博在上一篇笔记中说过）中打开lib/main.dart，然后创建里面的MaterialApp主题部分：（完整代码如下）

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    // MD3主题配置
    final ThemeData md3Theme = ThemeData(
      // 开启MD3
      useMaterial3: true,
      // 主色调（可通过ColorScheme.fromSeed生成协调色彩）
      colorScheme: ColorScheme.fromSeed(
        seedColor: Colors.blueAccent, // 种子色，自动生成配套色彩
        brightness: Brightness.light, // 亮色模式
      ),
      // 字体配置（可选，如使用自定义字体）
      fontFamily: 'Roboto', // MD3默认推荐字体
      // 组件风格示例：自定义AppBar样式
      appBarTheme: const AppBarTheme(
        centerTitle: true,
        elevation: 2,
      ),
    );

    return MaterialApp(
      title: 'MD3 Flutter Demo',
      theme: md3Theme,
      home: const MyHomePage(title: 'MD3 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(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),
      ),
    );
  }
}

3. 效果验证

重新运行项目，会看到：

• AppBar 采用 MD3 的扁平化 + 轻微阴影风格
• 文本样式自动适配 MD3 的字体层级
• 按钮、图标等组件的色彩与种子色（蓝色）协调统一
• 

三、总结

通过本文的步骤，你已完成：

1. Flutter 项目的快速创建与运行
2. 原生 MD3 主题的配置与效果验证

后续可基于此基础，继续搭建底部导航栏、页面结构等模块。如果需要更复杂的 MD3 组件（如导航抽屉、卡片），可以参考 Flutter 官方文档的 MD3 组件示例～