flutter Material3 风格、MaterialApp、ThemeData主题数据

Material Design简介

Material Design（简称MD）,中文名：材料设计语言，是由 Google 推出的全新的设计语言，谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。Material design 是谷歌为旗下全线产品提供的一套完整的设计规范，从2014年发布到现在，Material design 不仅仅是安卓设备阵营的设计规范，这种设计风格甚至被应用在苹果设备和windows设备中。 2014年Google发布了Material Design，成为了Google系产品统一的UI设计语言。2018年发布了Material Theming（Material Design2，简称M2），2021年新发布了Material You（Material Design3，简称M3）。

Flutter3.3开启Material3

在Flutter3.3版本以上，开始支持Material3，使用Material3样式首先是要配置启用Material3。Material3下的AppBar默认是白色的，看起来有点不习惯。

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
return MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
useMaterial3: true,//启用Material3
  ),
  home: const MyHomePage(),
);
  }
}

MaterialApp

MaterialApp 是 flutter 中提供入口的一个类，是符合Material Design设计理念的入口Widget,使用 theme 属性来为整个 MaterialApp 设置主题。可以在这里设置路由,后续用到再详细学习。debugShowCheckedModeBanner属性经常提到，设置他为True后，右上角的debug标志就会去掉。

navigatorKey, // 导航键
home, // 主页，应用打开时显示的页面
routes = const <String, WidgetBuilder>{},// 路由
initialRoute,//初始路由
onGenerateRoute,//生成路由
onUnknownRoute,//位置路由
navigatorObservers = const <NavigatorObserver>[],//导航的观察者
builder,//widget的构建
title = '',//程序切换时显示的标题。
color,//程序切换时应用图标背景颜色（仅安卓有效）
theme,//主题，用ThemeData
locale,//app语言支持
darkTheme，//暗黑模式主题颜色
localizationsDelegates,//多语言代理
localeResolutionCallback,//负责计算语言环境
supportedLocales = const <Locale>[Locale('en', 'US')],//支持的多语言
debugShowMaterialGrid = false,//显示网格
showPerformanceOverlay = false,//打开性能监控，覆盖在屏幕最上面
checkerboardRasterCacheImages = false,//	打开栅格缓存图像的棋盘格。
checkerboardOffscreenLayers = false,//打开渲染到屏幕外位图的层的棋盘格。
showSemanticsDebugger = false,//打开一个覆盖图，显示框架报告的可访问性信息 显示边框
debugShowCheckedModeBanner = true,//右上角显示一个debug的图标

如果设置debugShowMaterialGrid属性，会在界面上现实网格，帮助你更好的布局。

如果设置showPerformanceOverlay属性，会在界面上展示性能参数，当然目前我还看不太懂。

如果设置showSemanticsDebugger,则会显示打开显示可访问性信息的叠加层。

目前的我上述属性好多都不会用，后边学的多了，没准知道该怎么更好的使用这些属性。

ThemeData

ThemeData 是MaterialDesign Widget库的主题数据，我们可以通过ThemeData来自定义应用主题，ThemeData只包含了可自定义部分。Theme有两种：全局Theme和局部Theme。全局Theme是由应用程序根MaterialApp创建的Theme 。通过设置useMaterial3: true,启动Material3样式。下面是ThemeData的一小部分属性。primarySwatch是主题颜色的一个"样本色"，通过这个样本色可以在一些条件下生成一些其他的属性，例如，如果没有指定primaryColor，并且当前主题不是深色主题，那么primaryColor就会默认为primarySwatch指定的颜色，还有一些相似的属性如indicatorColor也会受primarySwatch影响。

  Brightness? brightness, //深色还是浅色
  Color? primaryColor, //主色，决定导航栏颜色
  Color? cardColor, //卡片颜色
  Color? dividerColor, //分割线颜色
  ButtonThemeData buttonTheme, //按钮主题
  Color dialogBackgroundColor,//对话框背景颜色
  String fontFamily, //文字字体
  TextTheme textTheme,// 字体主题，包括标题、body等文字样式
  IconThemeData iconTheme, // Icon的默认样式
  TargetPlatform platform, //指定平台，应用特定平台控件风格
  ColorScheme? colorScheme,

默认的样式看起来并不好看，如下图所示：

iconTheme可以设置图标的颜色，通过设置iconTheme: const IconThemeData(color: Colors.green) 将Icon设置成绿色,当然这只是全局颜色，你可以在部件中进行进一步的颜色设置。

class Test extends StatelessWidget {
  const Test({super.key});
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
      children: [
        const Icon(Icons.favorite),
        const Icon(Icons.pedal_bike),
        const Text(" 颜色固定"),
        ElevatedButton(
          child: const Text("normal"),
          onPressed: () {},
        ),
        IconButton(
          icon: const Icon(Icons.thumb_up),
          onPressed: () {},
        ),
      ],
    ),
    );
  }
}

效果图：

可以通过设置brightness进行亮、暗主题设置，设置brightness: Brightness.dark为暗色模式，看起来还是不错的。

效果图：

总结

通过MaterialApp进行最上层的颜色主题设置，后续的子组件都会延续使用。但是子组件的颜色和样式我们一般都会针对进行个性设置，字体颜色、按钮颜色、图标颜色都会有特殊需求，所以我还需要掌握具体组件的主题设置。