第二章 环境搭建与开发工具

说实话，很多初学者在 Material Design 这条路上栽跟头，不是因为学不会组件用法，而是卡在了环境搭建这一步。我见过太多人花了一整天装环境，最后连个按钮都跑不出来。嗯，这一章我们就来解决这个问题。

2.1 三大平台怎么选？

你可能会问：Android Studio、Flutter、Web，我到底该学哪个？

我的建议是——看你的目标。如果你要做原生 Android 应用，那就老老实实用 Android Studio。如果你想一套代码跑三个平台（iOS、Android、Web），Flutter 是更好的选择。至于 Web 端，其实 Material Design 最早就是为 Web 设计的，现在用 Vue 或 React 配合 Material-UI 也能做得很好。

我个人习惯是：主力项目用 Flutter，因为它的热重载太香了。改一行代码，一秒就看到效果，开发效率翻倍。但如果你要接入很多原生硬件功能（比如 NFC、蓝牙），那还是 Android Studio 更稳。

2.2 Android Studio 环境搭建

先说 Android Studio。我记得第一次装的时候，光是下载 SDK 就等了半小时。这里有个小技巧：用国内镜像源，速度能快 10 倍。

具体步骤其实很简单：

1. 去官网下载 Android Studio（推荐 Arctic Fox 以上版本）
2. 安装时勾选「Android Virtual Device」
3. 配置 SDK 路径，建议不要用默认的 C 盘
4. 创建一个新项目，选择「Empty Activity」

然后就是引入 Material Components 库。在 build.gradle 文件里加上：

dependencies {
    implementation 'com.google.android.material:material:1.11.0'
}

这里要注意版本号。我曾经踩过一个坑：用了 1.9.0 的版本，结果 BottomNavigationView 的样式怎么调都不对。后来发现是版本太旧，升级到 1.11.0 就好了。

2.3 Flutter 环境搭建

Flutter 的环境搭建相对简单。你只需要：

• 下载 Flutter SDK
• 配置环境变量
• 运行 flutter doctor 检查环境

运行 flutter doctor 后，它会告诉你缺什么。我建议把 Android Studio 和 VS Code 都装上，因为 Flutter 的热重载在 VS Code 里体验更好。

引入 Material 库？其实 Flutter 默认就带了 Material 组件。你新建一个项目，main.dart 里自动就有：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Hello Material')),
      body: Center(child: Text('欢迎来到 Material 世界')),
    ),
  ));
}

说白了，Flutter 的 Material 支持是开箱即用的。你不需要额外引入任何库，直接用 MaterialApp 包裹就行。

2.4 Web 环境选择

如果你做 Web 端，我个人推荐 React + Material-UI（现在叫 MUI）。安装也很简单：

npm install @mui/material @emotion/react @emotion/styled

然后你就可以在组件里直接用了：

import Button from '@mui/material/Button';

function App() {
  return <Button variant="contained">Hello Material</Button>;
}

Vue 的话，我建议用 Vuetify 3。安装命令：

npm install vuetify@next

嗯，这里有个小细节：Vuetify 3 只支持 Vue 3，别搞混了。

2.5 主题与样式基础配置

环境搭好了，接下来就是配置主题。Material Design 的核心就是主题系统，它决定了整个应用的颜色、字体、形状。

在 Android 里，你需要在 res/values/themes.xml 里配置：

<resources>
    <style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
        <item name="colorPrimary">#6200EE</item>
        <item name="colorSecondary">#03DAC6</item>
        <item name="android:statusBarColor">@color/primary</item>
    </style>
</resources>

在 Flutter 里，主题配置更直观：

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.deepPurple,
    ),
    useMaterial3: true,
  ),
)

我个人强烈建议开启 useMaterial3: true。Material 3 的配色系统更智能，你只需要给一个种子颜色，它会自动生成一套完整的配色方案。

2.6 知识体系总览

为了让你更直观地理解这一章的内容，我画了一张图：

2.7 避坑总结

最后，我把这些年踩过的坑总结一下：

问题	原因	解决方案
Gradle 编译报错	版本不匹配	用 SDK Manager 统一管理
Material 组件样式不对	库版本太旧	升级到 1.11.0+
Flutter 热重载失效	代码有语法错误	先修复所有红色波浪线
Web 端主题不生效	没引入 ThemeProvider	用 ThemeProvider 包裹根组件

嗯，环境搭建这块其实不难，就是细节多。你只要按部就班来，基本不会出大问题。如果卡住了，别硬撑，去社区搜一下，八成有人遇到过同样的问题。

好了，这一章就到这里。环境搭好了，下一章我们就可以真正开始写 Material Design 的代码了。

---