flutter 五点一点二：MaterialApp Theme

...
  InteractiveInkFeatureFactory? splashFactory,  //定义由 [InkWell] 和 [InkResponse]产生的水波纹的外观
    bool? useMaterial3,    //是否使用 material3
    VisualDensity? visualDensity,   //定义用户界面组件的视觉密度。
  Brightness brightness, // 应用整体主题的亮度。用于按钮之类的小部件，以确定在不使用主色或强调色时选择什么颜色。
  Color splashColor,  // 墨水飞溅的颜色。InkWell
    IconThemeData? iconTheme,  //与卡片和画布颜色形成对比的图标主题 设置icon的颜色 ， 按钮/APPbar中无效
    IconThemeData? primaryIconTheme, // 与原色(primarycolor  属性)形成对比的图标主题
    TextTheme? primaryTextTheme, // 与primary color形成对比的文本主题
    TextTheme? textTheme,  //与卡片和画布对比的文本肢体
 ...
 

splashFactory

• 定义由 [InkWell] 和 [InkResponse]产生的水波纹的外观

• Theme中可全局设置 InkWell组件亦可自行设置自己的效果-

• 默认效果

• splashFactory: NoSplash.splashFactory 无水波纹效果
  

• splashFactory: InkRipple.splashFactory
  

• splashFactory: InkSparkle.splashFactory
  

• splashFactory: InkSplash.splashFactory
  

splashColor:Colors.deepPurpleAccent 水波纹颜色

useMaterial3 是否使用Material3

• useMaterial3: false,
  
• useMaterial3: true,
  

visualDensity 定义用户界面组件的视觉密度

获取 VisualDensity visualDensity = Theme.of(context).visualDensity;
使用 padding: MaterialStateProperty.all(EdgeInsets.all(10+visualDensity.horizontal4))),
padding: MaterialStateProperty.all(EdgeInsets.all(10+visualDensity.vertical4)),

class AState extends State {
  @override
  Widget build(BuildContext context) {
    ThemeColors themeColors =
        Theme.of(context).extension() ?? ThemeColors(themeType: 0);

    VisualDensity visualDensity = Theme.of(context).visualDensity;

    return Scaffold(
      backgroundColor: themeColors.getColor(ThemeColors.main_color),
      body: Container(
        child: Column(
          children: [
            // TextField(
            //   decoration: InputDecoration(
            //     hintText: "请输入内容"
            //   ),
            // ),
            TextButton(
              onPressed: () {
                Navigator.pushNamed(context, '/B');
              },
              child: Text("B"),
              style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.green),
                  padding: MaterialStateProperty.all(EdgeInsets.all(10+visualDensity.horizontal*4))),
            ),
            TextButton(
              onPressed: () {
                Navigator.pushNamed(context, '/C');
              },
              child: Text("C"),
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.red),
                padding: MaterialStateProperty.all(EdgeInsets.all(10+visualDensity.vertical*4)),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

visualDensity:VisualDensity(horizontal: -1.0,vertical: 1),

visualDensity:VisualDensity(horizontal: 0,vertical: 0),

• 通常 1 个单位的密度等同于 6 个逻辑像素
• Material 的组件中 1 个单位的视觉密度通常等于 4 个逻辑像素
• 通常可以使用视觉密度 来改变显示区域的效果

brightness

• Brightness.dark //夜间模式
• Brightness.light

TextTheme? primaryTextTheme, / TextTheme? textTheme,

• 可用于统一 项目 字体的style

const TextTheme({
    TextStyle? displayLarge,
    TextStyle? displayMedium,
    TextStyle? displaySmall,
    this.headlineLarge,
    TextStyle? headlineMedium,
    TextStyle? headlineSmall,
    TextStyle? titleLarge,
    TextStyle? titleMedium,
    TextStyle? titleSmall,
    TextStyle? bodyLarge,
    TextStyle? bodyMedium,
    TextStyle? bodySmall,
    TextStyle? labelLarge,
    this.labelMedium,
    TextStyle? labelSmall,

可以使用如下方式 将sytle 应用到指定文字
Theme.of(context).primaryTextTheme
Theme.of(context).textTheme

 primaryTextTheme:TextTheme(
          displayLarge: TextStyle(
            color: Colors.yellow
          ),
          titleLarge: TextStyle(
              color: Colors.yellow
          ),
          bodyLarge: TextStyle(
                color: Colors.yellow
            ),
          labelLarge: TextStyle(
              color: Colors.yellow
          ),
        )

 child: Text("C",style: Theme.of(context).primaryTextTheme.bodyLarge,),

结果 C 变成黄色