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.mzph.cn/bicheng/29676.shtml

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

相关文章

AI在线免费视频工具2：视频配声音

AI在线免费视频工具2：视频配声音

1、视频配声音 https://deepmind.google/discover/blog/generating-audio-for-video/ https://www.videotosoundeffects.com/ （免费在线使用）
阅读更多...
企业内网是如何禁用U盘的？电脑禁用U盘有哪些方法？

企业内网是如何禁用U盘的？电脑禁用U盘有哪些方法？

在当今企业环境中，数据安全和信息保护至关重要。 为了防止数据泄露和恶意软件传播，很多企业选择在内网中禁用U盘，以控制数据的物理传输。 小编这就来给大家总结一份详细指南！！ 关于企业内网如何禁用U盘的指南&#x…
阅读更多...
mysql分析常用锁

mysql分析常用锁

这里写自定义目录标题 1.未提交事物，阻塞DDL，继而阻塞所有同表的后续操作,查看未提交事务的进程2.存着正在进行的线程数据。3.根据processlist表中的id杀掉未释放的线程4.查看正在使用的表5.mysql为什么state会有waiting for handler commit6.什么情况导…
阅读更多...
【Spring Cloud应用框架】

【Spring Cloud应用框架】

🎥博主：程序员不想YY啊 💫CSDN优质创作者，CSDN实力新星，CSDN博客专家 🤗点赞🎈收藏⭐再看💫养成习惯 ✨希望本文对您有所裨益，如有不足之处，欢迎在评论区提出…
阅读更多...
异步爬虫：aiohttp 异步请求库使用：

异步爬虫：aiohttp 异步请求库使用：

使用requests 请求库虽然可以完成爬虫业务，但是对于异步任务来说，它是做不到的， 这时候我们需要借助 aiohttp 异步请求库来完成异步爬虫的编写： 话不多说，直接看示例： 注意：楼主使用的python版…
阅读更多...
还在为找不到工作发愁？来看看嵌入式行业

还在为找不到工作发愁？来看看嵌入式行业

嵌入式系统的就业方向非常广泛，涵盖了许多不同的行业和领域。以下是一些常见的嵌入式系统就业方向： 消费电子产品：这包括智能手机、平板电脑、智能电视、智能家居设备等。嵌入式系统工程师可以参与设计、开发和测试这些产品的硬件和软件。 汽…
阅读更多...
超简洁的待办事项自托管便签todo

超简洁的待办事项自托管便签todo

什么是todo todo 是一个自托管的 todo web 应用程序，可让您以简单且最少的方式跟踪您的 todo。 搭建 使用Docker命令行方式进行搭建 docker run -d -p 8000:8000 -v todo_db:/usr/local/go/src/todo/todo.db prologic/todo Docker-compose.yml version: 3 ​ se…
阅读更多...
工程项目全生命周期管理系统企智汇一站式解决方案！

工程项目全生命周期管理系统企智汇一站式解决方案！

在当今竞争激烈的工程行业，实现工程项目的全生命周期管理已成为企业提升效率、降低成本、确保质量并赢得市场竞争的关键。企智汇的工程项目管理系统解决方案致力于助力工程企业实现全面、精细化的项目全生命周期管理，确保从项目启动到竣工交付的每一个环…
阅读更多...
微信小程序 - 出于性能原因，对长行跳过令牌化。长行的长度可通过 “editor.maxTokenizationLineLength” 进行配置

微信小程序 - 出于性能原因，对长行跳过令牌化。长行的长度可通过 “editor.maxTokenizationLineLength” 进行配置

问题描述 出于性能原因，对长行跳过令牌化。长行的长度可通过 “editor.maxTokenizationLineLength” 进行配置。 解决方案 设置 - 编辑器设置 - 更多编辑器设置... 搜索：maxtoken，原来是 20000，我改成了 200000 即可~
阅读更多...
NVIDIA Jetson AI边缘计算盒子

NVIDIA Jetson AI边缘计算盒子

这里写自定义目录标题 烧录系统安装Jetpack安装cuda安装Pytorch安装onnxruntime安装qv4l2 烧录系统 选择一台Linux系统，或者VMware的电脑作为主机，烧录系统和后面安装Jetpack都会用到。 根据供应商的指令烧录的，暂时还没验证官方烧录&#x…
阅读更多...
unity简单数字拼图小游戏（源码）

unity简单数字拼图小游戏（源码）

代码： using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems; using UnityEngine.SceneManagement;public class DragImage : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {pub…
阅读更多...
2. Revit API UI 之 IExternalCommand 和 IExternalApplication

2. Revit API UI 之 IExternalCommand 和 IExternalApplication

2. Revit API UI 之 IExternalCommand 和 IExternalApplication 上一篇我们大致看了下 RevitAPI 的一级命名空间划分，再简单讲了一下Attributes命名空间下的3个类，并从一个代码样例，提到了Attributes和IExternalCommand ，前者是指…
阅读更多...
【docker 如何自定义镜像】

【docker 如何自定义镜像】

查看容器列表 首先是查看容器：在命令台中键入 docker ps -a 命令，得到如下界面。 从容器创建一个新镜像 接着，dockers commit 容器名 要保存成的镜像名：版本名（若没有 ：版本名 则直接默认为latest&#x…
阅读更多...
【网络安全】网络安全基础精讲 - 网络安全入门第一篇

【网络安全】网络安全基础精讲 - 网络安全入门第一篇

目录 一、网络安全基础 1.1网络安全定义 1.2网络系统安全 1.3网络信息安全 1.4网络安全的威胁 1.5网络安全的特征 二、入侵方式 2.1黑客 2.1.1黑客入侵方式 2.1.2系统的威胁 2.2 IP欺骗 2.2.1 TCP等IP欺骗 2.2.2 IP欺骗可行的原因 2.3 Sniffer探测 2.4端口扫描技术…
阅读更多...
2024新版AI创作系统pro搭建，支持文生漫画视频ai对话问答/ai音乐创作/ai测评/ai换脸/ai写真

2024新版AI创作系统pro搭建，支持文生漫画视频ai对话问答/ai音乐创作/ai测评/ai换脸/ai写真

一、系统介绍 一款结合了多种功能应用，是当前市场最热门的AI工具综合体 AI动漫生成 AI音乐创作 AI写真 AI换脸 AI绘画 AI趣测 六大AI功能 AI创作小程序是一种利用人工智能技术为用户提供服务，并通过某种方式实现的小程序。这种小程序可以应用于多…
阅读更多...
gRPC（Google Remote Procedure Call Protocol）谷歌远程过程调用协议

gRPC（Google Remote Procedure Call Protocol）谷歌远程过程调用协议

文章目录 1、gRPC简介2、gRPC核心的设计思路3、gPRC与protobuf关系 1、gRPC简介 gPRC是由google开源的一个高性能的RPC框架。Stubby Google内部的RPC，演化而来的，2015年正式开源。云原生时代是一个RPC标准。 2、gRPC核心的设计思路 网络通信 ---> gPR…
阅读更多...
vue中通过自定义指令实现一个可拖拽，缩放的弹窗

vue中通过自定义指令实现一个可拖拽，缩放的弹窗

效果 功能描述 按住头部可拖拽鼠标放到边框，可缩放多层重叠丰富的插槽，易于扩展 示例 指令代码 export const dragDialog {inserted: function (el, { value, minWidth 400, minHeight 200 }) {// 让弹窗居中let dialogHeight el.clientHeight ?…
阅读更多...
Vue61-消息订阅与发布-任意组件之间的通信

Vue61-消息订阅与发布-任意组件之间的通信

一、原理图 原生的JS不能实现订阅与发布，要借助第三方库：pubsub-js（任何一个框架都能用！） 二、案例实现 school组件，需要数据（订阅消息），student组件提供数据&#xff0…
阅读更多...
MySQL 高级 - 第十二章 | 数据库的设计规范

MySQL 高级 - 第十二章 | 数据库的设计规范

目录 第十二章 数据库的设计规范12.1 为什么需要数据库设计12.2 范式12.2.1 范式简介12.2.2 范式都包括哪些12.2.3 键和相关属性的概念12.2.4 第一范式（1st NF）12.2.5 第二范式（2nd NF）12.2.6 第三范式（3rd NF&#xf…
阅读更多...
onnx进阶算子优化

onnx进阶算子优化

一、定义 如何保证pytorch 模型顺利转为onnx. 前言pytorch 算子是如何与onnx 算子对齐的？Asinh 算子出现于第 9 个 ONNX 算子集。PyTorch 在 9 号版本的符号表文件中是怎样支持这个算子的？BitShift 算子出现于第11个 ONNX 算子集。PyTorch 在 11 号版本…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023