Flutter - Material3适配

demo 地址: https://github.com/iotjin/jh_flutter_demo
代码不定时更新，请前往github查看最新代码

Flutter - Material3适配

  • 对比图
  • 具体实现
    • 一些组件的变化
  • 代码实现
    • Material2的ThemeData
    • Material3的ThemeData

Material3适配官方文档

flutter SDK升级到3.16.0之后 ThemeData() 的useMaterial3属性如果不设置默认为true，这时运行项目会发现有些UI效果和之前有点不一样，如果原本使用的是默认的主题色，此时会发现主题色已经发生变化，因为Material3的默认主题不再是蓝色，变成了紫色。
如果不想使用Material3直接设置useMaterial3: false即可

对比图

以下图片中的一些组件已经做了适配如FloatingActionButton按钮、TextField的边框等，方便对比展示效果，具体请查看代码

Material2Material3

具体实现

Material3适配官方文档

  • Material3适配主要通过ThemeData实现的
  • 在demo中，一部分常用的组件都有抽出来的公用组件，一般情况把组件适配一下通过使用公用组件可以避免直接设置ThemeData带来的问题。当然直接设置ThemeData也可以
  • 设置 ThemeData(ThemeData(useMaterial3: true, ...) 使用 Material3

其中最重要的是设置主色调，在 Material3 中官方推荐通过 colorScheme: ColorScheme.fromSeed设置主色调，当然通过 ColorScheme.fromSwatch()也可以设置，不过可能需要多配置点东西
其余的就是一些组件的设置了

一些组件的变化

  • Text() 样式调整
  • TextButton()、ElevatedButton()、OutlinedButton()等 风格变化，更圆润
  • FloatingActionButton()形状从圆形变成矩形
  • Switch() UI变化
  • Card()背景色
  • AppBar()底部阴影、图标颜色等
  • BottomNavigationBar()水波纹效果变化
  • TabBar()底部线
  • Alert()、BottomSheet()等弹框的背景色、圆角、水波纹效果
    …

代码实现

以下是通过ThemeData()设置整个项目的，对应demo的全局主题设置文件getThemeData()函数
根据需要打开并配置, 如果有基础组件也可以针对组件单独配置
单个适配或对比详见 demo代码UITest3文件

Material2的ThemeData

  static _m2ThemeData(Color themeColor, {bool isDarkMode = false}) {// 暗黑模式高亮显示颜色var darkPrimaryThemeColor = KColors.kThemeColor;return ThemeData(useMaterial3: false,primarySwatch: JhColorUtils.materialColor(themeColor),primaryColor: themeColor,colorScheme: ColorScheme.fromSwatch().copyWith(brightness: isDarkMode ? Brightness.dark : Brightness.light,secondary: isDarkMode ? KColors.kThemeDarkColor : themeColor,// surfaceTint: Colors.transparent, // 影响 card 的配色，M3下是applySurfaceTint// outline: Colors.grey, // M3 设置OutlinedButton、TextField 边框颜色(尽量单独设置) ， Color(0xff79747e)),// 页面背景色scaffoldBackgroundColor: isDarkMode ? KColors.kBgDarkColor : KColors.kBgColor,// 导航条在base_appbar页面配置（没使用base_appbar的按下面配置的）appBarTheme: AppBarTheme(systemOverlayStyle: JhStatusBarUtils.getStatusBarStyle(isDark: isDarkMode),color: isDarkMode ? KColors.kNavBgDarkColor : themeColor,iconTheme: const IconThemeData(color: Colors.white),// shadowColor: Colors.grey, // M3 设置阴影颜色),// 主界面tabbar，在base_tabbar页面配置// bottomNavigationBarTheme: BottomNavigationBarThemeData(//   backgroundColor: Colors.white,//   selectedItemColor: KColors.kTabBarSelectTextColor,//   unselectedItemColor: KColors.kTabBarNormalTextColor,// ),// 分割线dividerTheme: DividerThemeData(color: isDarkMode ? KColors.kLineDarkColor : KColors.kLineColor),// Tab指示器颜色indicatorColor: isDarkMode ? darkPrimaryThemeColor : themeColor,// 文字选择色（输入框选择文字等）textSelectionTheme: TextSelectionThemeData(selectionColor: isDarkMode ? darkPrimaryThemeColor.withAlpha(70) : themeColor.withAlpha(70),selectionHandleColor: isDarkMode ? darkPrimaryThemeColor : themeColor,cursorColor: isDarkMode ? darkPrimaryThemeColor : themeColor, // 光标),// 主要用于Material背景色// canvasColor: isDarkMode ? KColors.kMaterialBgDarkColor : KColors.kMaterialBgColor,// errorColor: isDarkMode ? KColors.kErrorTextDarkColor : KColors.kErrorTextColor,// cupertinoOverrideTheme: CupertinoThemeData(//   brightness: isDarkMode ? Brightness.dark : Brightness.light,// ),// visualDensity: VisualDensity.standard,);}

Material3的ThemeData

  static _m3ThemeData(Color themeColor, {bool isDarkMode = false}) {// 暗黑模式高亮显示颜色var darkPrimaryThemeColor = KColors.kThemeColor;return ThemeData(useMaterial3: true,primarySwatch: JhColorUtils.materialColor(themeColor),primaryColor: themeColor,// 页面背景色scaffoldBackgroundColor: isDarkMode ? KColors.kBgDarkColor : KColors.kBgColor,// 导航条在base_appbar页面配置（没使用base_appbar的按下面配置的）appBarTheme: AppBarTheme(systemOverlayStyle: JhStatusBarUtils.getStatusBarStyle(isDark: isDarkMode),color: isDarkMode ? KColors.kNavBgDarkColor : themeColor,iconTheme: const IconThemeData(color: Colors.white),// shadowColor: Colors.grey, // M3 设置阴影颜色),// 主界面tabbar，在base_tabbar页面配置// bottomNavigationBarTheme: BottomNavigationBarThemeData(//   backgroundColor: Colors.white,//   selectedItemColor: KColors.kTabBarSelectTextColor,//   unselectedItemColor: KColors.kTabBarNormalTextColor,// ),// 分割线dividerTheme: DividerThemeData(color: isDarkMode ? KColors.kLineDarkColor : KColors.kLineColor),// Tab指示器颜色indicatorColor: isDarkMode ? darkPrimaryThemeColor : themeColor,// 文字选择色（输入框选择文字等）textSelectionTheme: TextSelectionThemeData(selectionColor: isDarkMode ? darkPrimaryThemeColor.withAlpha(70) : themeColor.withAlpha(70),selectionHandleColor: isDarkMode ? darkPrimaryThemeColor : themeColor,cursorColor: isDarkMode ? darkPrimaryThemeColor : themeColor, // 光标),// 主要用于Material背景色// canvasColor: isDarkMode ? KColors.kMaterialBgDarkColor : KColors.kMaterialBgColor,// errorColor: isDarkMode ? KColors.kErrorTextDarkColor : KColors.kErrorTextColor,// cupertinoOverrideTheme: CupertinoThemeData(//   brightness: isDarkMode ? Brightness.dark : Brightness.light,// ),// visualDensity: VisualDensity.standard,/// ------------------------------ Material3适配 ------------------------------/// https://docs.flutter.dev/release/breaking-changes/material-3-migration/// 一些调整适配详见 UITest3/// 根据需要打开并配置, 如果有基础组件也可以针对组件单独配置/// M3设置主题色 方式一colorScheme: ColorScheme.fromSeed(seedColor: isDarkMode ? darkPrimaryThemeColor : themeColor,brightness: isDarkMode ? Brightness.dark : Brightness.light,surfaceTint: Colors.transparent, // 影响 card 的配色，M3下是applySurfaceTint// outline: Colors.grey, // M3 设置OutlinedButton、TextField、Switch 边框颜色(尽量单独设置) ， Color(0xff79747e)),/// M3设置主题色 方式二// colorScheme: ColorScheme.fromSwatch().copyWith(//   brightness: isDarkMode ? Brightness.dark : Brightness.light,//   secondary: isDarkMode ? KColors.kThemeDarkColor : themeColor,//   surfaceTint: Colors.transparent, // 影响 card 的配色，M3下是applySurfaceTint//   // outline: Colors.grey, // M3 设置OutlinedButton、TextField 边框颜色(尽量单独设置) ， Color(0xff79747e)// ),// textTheme: TextTheme(//   bodyMedium: TextStyle(color: isDarkMode ? KColors.kBlackTextDarkColor : KColors.kBlackTextColor),// ),// textButtonTheme: TextButtonThemeData(//   style: TextButton.styleFrom(//     // side: BorderSide(width: 1.0, color: themeColor), // 设置边框//     shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)), // 设置圆角//     splashFactory: InkSplash.splashFactory, // 设置水波纹//   ),// ),// outlinedButtonTheme: OutlinedButtonThemeData(//   style: ButtonStyle(side: MaterialStateProperty.all(BorderSide(color: themeColor))),// ),// floatingActionButtonTheme: FloatingActionButtonThemeData(//   backgroundColor: themeColor,//   foregroundColor: Colors.white,//   shape: CircleBorder(), // 浮动按钮设成圆形// ),// progressIndicatorTheme: ProgressIndicatorThemeData(//   refreshBackgroundColor: isDarkMode ? KColors.kMaterialBgDarkColor : KColors.kMaterialBgColor, // 下拉刷新MaterialHeader()背景色适配////   // color: Colors.purpleAccent, // 设置进度指示器的颜色//   // linearTrackColor: Colors.black, // 设置线性进度指示器的背景颜色//   // linearMinHeight: 4.0, // 设置线性进度指示器的最小高度//   // circularTrackColor: Colors.green, // 设置圆形进度指示器的背景颜色//   // refreshBackgroundColor: Colors.orange, // 设置刷新指示器的背景颜色// ),// tabBarTheme: TabBarTheme(//   dividerColor: Colors.grey[400],//   dividerHeight: 0.5,// ),// BottomNavigationBar()点击水波纹样式变更，通过Theme() 设置splashFactory: InkSplash.splashFactory);}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/350044.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C# WinForm —— 35 StatusStrip 介绍

C# WinForm —— 35 StatusStrip 介绍

1. 简介 状态栏 StatusStrip，默认在软件的最下方，用于显示系统时间、版本、进度条、账号、角色信息、操作位置信息等 可以在状态栏中添加的控件类型有：StatusLabel、ProgressBar、DropDownButton、SplitButton 2. 属性 属性解释(Name)控…
阅读更多...
utm投影

utm投影

一 概述 UTM (Universal Transverse Mercator)坐标系是由美国军方在1947提出的。虽然我们仍然将其看作与“高斯－克吕格”相似的坐标系统，但实际上UTM采用了网格的分带（或分块）。除在美国本土采用Clarke 1866椭球体以外&#xff0c…
阅读更多...
树莓派等Linux开发板上使用 SSD1306 OLED 屏幕，bullseye系统 ubuntu，debian

树莓派等Linux开发板上使用 SSD1306 OLED 屏幕，bullseye系统 ubuntu，debian

Raspberry Pi OS Bullseye 最近发布了，随之而来的是许多改进，但其中大部分都在引擎盖下。没有那么多视觉差异，最明显的可能是新的默认桌面背景，现在是大坝或湖泊上的日落。https://www.the-diy-life.com/add-an-oled-stats-display-to-raspberry-pi-os-bullseye/ 通过这次操…
阅读更多...
【GD32】 TIMER通用定时器学习+PWM输出占空比控制LED

【GD32】 TIMER通用定时器学习+PWM输出占空比控制LED

扩展：对PWM波形的输出进行捕获 目录 一、简介二、具体功能描述1、时钟源的选择：2、预分频器：3、计数模式：向上计数模式：向下计数模式：中央对齐模式： 4、捕获/比较通道 输入捕获模式 输出比…
阅读更多...
前端问题整理

前端问题整理

Vue vue mvvm（Model-View-ViewModel）架构模式原理 Model 是数据层，即 vue 实例中的数据View 是视图层， 即 domViewModel，即连接Model和Vue的中间层，Vue实例就是ViewModelViewModel 负责将 Model 的变化反映…
阅读更多...
TCGAbiolinks包学习

TCGAbiolinks包学习

TCGAbiolinks 写在前面学习目的GDCquery GDCdownload GDC prepare中间遇到的报错下载蛋白质数据 写在前面 由于别人提醒我TCGA的数据可以利用TCGAbiolinks下载并处理，所以我决定阅读该包手册，主要是该包应该是有更新的，我看手册进行更新了&…
阅读更多...
【CS.PL】Lua 编程之道: 简介与环境设置 - 进度8%

【CS.PL】Lua 编程之道: 简介与环境设置 - 进度8%

1 初级阶段 —— 简介与环境设置 文章目录 1 初级阶段 —— 简介与环境设置1.1 什么是 Lua？特点?1.2 Lua 的应用领域1.3 安装 Lua 解释器1.3.1 安装1.3.2 Lua解释器的结构 1.4 Lua执行方式1.4.0 程序段1.4.1 使用 Lua REPL（Read-Eval-Print Loop&#x…
阅读更多...
LAMP部署及应用

LAMP部署及应用

LAMP架构 LAMP架构是指一种常用的网站开发架构，它由以下几个组件组成： Linux操作系统：作为服务器的操作系统，LAMP架构通常使用Linux作为操作系统，因为Linux通常被认为是稳定和安全的。 Apache HTTP服务器&#xff1a…
阅读更多...
iOS ReactiveCocoa MVVM

iOS ReactiveCocoa MVVM

学习了在MVVM中如何使用RactiveCocoa，简单的写上一个demo。重点在于如何在MVVM各层之间使用RAC的信号来更方便的在各个层之间进行响应式数据交互。 demo需求：一个登录界面(登录界面只有账号和密码都有输入，登录按钮才可以点击操作)&#xff0…
阅读更多...
AI模型部署：Triton+TensorRT部署Bert文本向量化服务实践

AI模型部署：Triton+TensorRT部署Bert文本向量化服务实践

前言 本篇介绍以Triton作为推理服务器，TensorRT作为推理后端，部署句嵌入向量模型m3e-base的工程方案和实现，句嵌入模型本质上是Bert结构，本案例可以推广到更一般的深度学习模型部署场景。 内容摘要 推理服务器和推理后端介绍Ten…
阅读更多...
【Numpy】numpy.r_用法

【Numpy】numpy.r_用法

numpy.r_[字符串, 数组, 数组] numpy.r_的这三个整数默认值是0,1,-1 numpy.c_就是numpy.r_在三个整数是-1,2,0时的特例，因为常用，所以单独拎出来了。第一个参数-1指沿最后一个轴(维度)连接 有一个shape(2, 3, 4)的数组 np.random.randint(low0, high1…
阅读更多...
文章MSM_metagenomics（一）：介绍

文章MSM_metagenomics（一）：介绍

介绍 欢迎大家关注全网生信学习者系列： WX公zhong号：生信学习者Xiao hong书：生信学习者知hu：生信学习者CDSN：生信学习者2 用于复现Huang et al. [huang2024establishment]研究分析的计算工作流程，所有复…
阅读更多...
LDR6020显示器应用：革新连接体验，引领未来显示技术

LDR6020显示器应用：革新连接体验，引领未来显示技术

一、引言 随着科技的飞速发展，显示器作为信息展示的重要载体，其性能和应用场景不断得到拓展。特别是在办公、娱乐以及物联网等领域，用户对显示器的需求越来越多样化。在这一背景下，LDR6020显示器的出现，以其卓越的性能…
阅读更多...
STM32硬件接口I2C应用（基于HMC5883L）

STM32硬件接口I2C应用（基于HMC5883L）

目录 概述 1 STM32Cube控制配置I2C 1.1 I2C参数配置 1.2 使用STM32Cube产生工程 2 HAL库函数介绍 2.1 初始化函数 2.2 写数据函数 2.3 读数据函数 3 认识HMC5883L 3.1 HMC5883L功能介绍 3.2 HMC5883L的寄存器 4 HMC5883L驱动程序实现 4.1 驱动函数实现 4.2 完整驱…
阅读更多...
QT调用vs2019生成的c++动态库

QT调用vs2019生成的c++动态库

QT调用vs2019生成的c动态库 dll库的创建方法： VS2019创建c动态链接库dll与调用方法-CSDN博客 加减法示范： 头文件 // 下列 ifdef 块是创建使从 DLL 导出更简单的 // 宏的标准方法。此 DLL 中的所有文件都是用命令行上定义的 DLL3_EXPORTS // 符号编…
阅读更多...
解决方案︱视频孪生智慧高速解决方案

解决方案︱视频孪生智慧高速解决方案

系统概述 在交通强国战略的指导下，我国政府高度重视以数字化为核心的智慧高速公路建设与发展。2023年9月，交通运输部印发了《交通运输部关于推进公路数字化转型加快智慧公路建设发展的意见》，强调到2035年，全面实现公路数字化转型…
阅读更多...
【C++】和【预训练模型】实现【机器学习】【图像分类】的终极指南

【C++】和【预训练模型】实现【机器学习】【图像分类】的终极指南

目录 💗1. 准备工作和环境配置💕 💖安装OpenCV💕 💖安装Dlib💕 下载并编译TensorFlow C API💕 💗2. 下载和配置预训练模型💕 💖2.1 下载预训练的ResNet…
阅读更多...
一文入门vim

一文入门vim

先来波快问快答。 第一个问题，vim是什么？ vim就是一文本编辑器。 第二个问题，我们为什么要使用vim？ 好像在终端中可选择使用的文本编辑器也不多（其他有，但是相对而言vim用的比较广泛） 第三…
阅读更多...
automa学习：写一个取某东图书数据的片断

automa学习：写一个取某东图书数据的片断

周五了，实在没事情了。正好上午有个朋友问automa的事，心想再写一个练习一下，毕竟，熟能生巧。 目标某东图书： 分析及介绍如下。 1.新建标签页 1.悬停元素。要注意 县 停 .cate_menu_item:nth-child(14) > .cate_…
阅读更多...
SQL进阶day10————多表查询

SQL进阶day10————多表查询

目录 1嵌套子查询 1.1月均完成试卷数不小于3的用户爱作答的类别 1.2月均完成试卷数不小于3的用户爱作答的类别 ​编辑1.3 作答试卷得分大于过80的人的用户等级分布 2合并查询 2.1每个题目和每份试卷被作答的人数和次数 2.2分别满足两个活动的人 3连接查询 3.1满足条件…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023