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的边框等,方便对比展示效果,具体请查看代码
| Material2 | Material3 |
|---|---|
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
具体实现
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()底部线
…
代码实现
以下是通过
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);}
相关文章:
Flutter - Material3适配
demo 地址: https://github.com/iotjin/jh_flutter_demo 代码不定时更新,请前往github查看最新代码 Flutter - Material3适配 对比图具体实现一些组件的变化 代码实现Material2的ThemeDataMaterial3的ThemeData Material3适配官方文档 flutter SDK升级到3.16.0之后 …...
一个有趣的c++案例
1. 源码 #include <stdio.h> #include <stdint.h> #include <iostream>using namespace std;uint8_t a 0; uint8_t b 0;#define MY_LOG#ifdef MY_LOG#define my_log(...) printf(__VA_ARGS__); fflush(stdout)#else #define my_log(...) #endifvoid …...
【python】OpenCV—Background Estimation(15)
文章目录 中值滤波中值滤波得到图像背景移动侦测 学习来自 OpenCV基础(14)OpenCV在视频中的简单背景估计 中值滤波 中值滤波是一种非线性平滑技术,主要用于数字信号处理,特别是在图像处理中去除噪声。 一、定义与原理 定义&am…...
【Java毕业设计】基于JavaWeb的旅游论坛管理系统
文章目录 摘 要目 录1 概述1.1 研究背景及意义1.2 国内外研究现状1.3 拟研究内容1.4 系统开发技术1.4.1 Java编程语言1.4.2 vue技术1.4.3 MySQL数据库1.4.4 B/S结构1.4.5 Spring Boot框架 2 系统需求分析2.1 可行性分析2.2 系统流程2.2.1 操作流程2.2.2 登录流程2.2.3 删除信息…...
讲一下v-model的底层实现原理?
什么是v-model? 在Vue.js中,v-model是一个用于实现双向数据绑定的指令。它通常用于表单控件上,以便能够在视图和数据模型之间自动同步数据。具体来说,当用户在输入框中输入内容时,数据模型会自动更新;当数…...
大模型基础——从零实现一个Transformer(3)
大模型基础——从零实现一个Transformer(1)-CSDN博客 一、前言 之前两篇文章已经讲了Transformer的Embedding,Tokenizer,Attention,Position Encoding, 本文我们继续了解Transformer中剩下的其他组件. 二、归一化 2.1 Layer Normalization layerNorm是针对序列数据提出的一种…...
一二三应用开发平台应用开发示例——概述、应用开发示例简介及创建前后端模块
概述 对于应用开发平台的核心基石——系统管理模块,我精心撰写了一份详尽的说明手册。该手册旨在从使用者的角度出发,不仅全面阐述系统的各项属性和功能,更着重强调使用过程中的注意事项和最佳实践。 在手册的编写过程中,我特别…...
springboot+minio+kkfileview实现文件的在线预览
在原来的文章中已经讲述过springbootminio的开发过程,这里不做讲述。 原文章地址: https://blog.csdn.net/qq_39990869/article/details/131598884?spm1001.2014.3001.5501 如果你的项目只是需要在线预览图片或者视频那么可以使用minio自己的预览地址进…...
HTML5+CSS3小实例:粘性文字的滚动效果
实例:粘性文字的滚动效果 技术栈:HTML+CSS 效果: 源码: 【HTML】 <!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-sca…...
Java 关于抽象 -- Java 语言的抽象类、接口和函数式接口
大家好,我是栗筝i,这篇文章是我的 “栗筝i 的 Java 技术栈” 专栏的第 008 篇文章,在 “栗筝i 的 Java 技术栈” 这个专栏中我会持续为大家更新 Java 技术相关全套技术栈内容。专栏的主要目标是已经有一定 Java 开发经验,并希望进一步完善自己对整个 Java 技术体系来充实自…...
用 Notepad++ 写 Java 程序
安装包 百度网盘 提取码:6666 安装步骤 双击安装包开始安装。 安装完成: 配置编码 用 NotePad 写 Java 程序时,需要设置编码。 在 设置,首选项,新建 中进行设置,可以对每一个新建的文件起作用。 Note…...
malloc brk mmap
malloc 是一个库函数,通常在 C 标准库中实现,用于动态内存分配。malloc 的具体实现可能因库、操作系统和平台而异,但通常它会与底层操作系统提供的内存管理功能进行交互。 对于大多数现代操作系统(如 Unix、Linux、Windows 等&am…...
java多线程相关概念
在Java多线程编程中,有几个关键的术语需要理解: 1.线程(Thread):线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运作单位。 2.进程(Process):进程是系统进行资源分配和调度…...
【html】简单网页模板源码
大家每一次在写网页的时候会不会因为布局而困扰今天就给大家带来一个我自己亲自编写的网页的基本的模板大家可以直接去利用,大家也可以利用自己的想法去做空间的美化和完善。 源码: html: <!DOCTYPE html> <html lang"zh"><…...
借助Historian Connector + TDengine,打造工业创新底座
在工业自动化的领域中,数据的采集、存储和分析是实现高效决策和操作的基石。AVEVA Historian (原 Wonderware Historian) 作为领先的工业实时数据库,专注于收集和存储高保真度的历史工艺数据。与此同时,TDengine 作为一款专为时序数据打造的高…...
51单片机-实机演示(LED点阵)
目录 前言: 一.线位置 二.扩展 三.总结 前言: 这是一篇关于51单片机实机LED点阵的插线图和代码说明.另外还有一篇我写的仿真的连接在这:http://t.csdnimg.cn/ZNLCl,欢迎大家的点赞,评论,关注. 一.线位置 接线实机图. 引脚位置注意: 1. *-* P00->RE8 P01->RE7 …...
STM32硬件接口I2C应用(基于MP6050)
目录 概述 1 STM32Cube控制配置I2C 1.1 I2C参数配置 1.2 使用STM32Cube产生工程 2 HAL库函数介绍 2.1 初始化函数 2.2 写数据函数 2.3 读数据函数 3 认识MP6050 3.1 MP6050功能介绍 3.2 加速计测量寄存器 编辑3.3 温度计量寄存器 3.4 陀螺仪测量寄存器 4 MP60…...
基于JSP的贝儿米幼儿教育管理系统
开头语: 你好呀,我是计算机学长猫哥!如果您对本系统感兴趣或者有相关需求,文末可以找到我的联系方式。 开发语言: Java 数据库: MySQL 技术: JSP技术 工具: IDEA/Eclipse、…...
数字化与文化交融,树莓集团助力园区文化升级
树莓集团在产业园运营领域建设了特色空间布局,包括产业实训基地、产业办公中心、业务资源平台、产学研中心、数字资产空间、双创孵化空间、产业实验室和人才项目转化中心等八大板块,共同构建了一个全面而深入的产业支撑体系,为园区文化建设提…...
【原创课程】如何制作安装板
具体步骤如下: 第一步:新建页类型为“安装板布局图(交互式)”并修改页描述为“安装板布局图”。 第二步:新建安装板 第三步:设置图纸上符号元件的部件,双击符号,弹出常规设备窗口,点击部件进行选择 第四步:打开2D安装板导航器,将图纸中的设备拖拽到安装板上 第五步…...
Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)
文章目录 1.什么是Redis?2.为什么要使用redis作为mysql的缓存?3.什么是缓存雪崩、缓存穿透、缓存击穿?3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...
JS设计模式(4):观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中,我们经常会遇到这样的场景:一个对象的状态变化需要自动通知其他对象,比如: 电商平台中,商品库存变化时需要通知所有订阅该商品的用户;新闻网站中࿰…...
【JVM】Java虚拟机(二)——垃圾回收
目录 一、如何判断对象可以回收 (一)引用计数法 (二)可达性分析算法 二、垃圾回收算法 (一)标记清除 (二)标记整理 (三)复制 (四ÿ…...
HubSpot推出与ChatGPT的深度集成引发兴奋与担忧
上周三,HubSpot宣布已构建与ChatGPT的深度集成,这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋,但同时也存在一些关于数据安全的担忧。 许多网络声音声称,这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...
提升移动端网页调试效率:WebDebugX 与常见工具组合实践
在日常移动端开发中,网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时,开发者迫切需要一套高效、可靠且跨平台的调试方案。过去,我们或多或少使用过 Chrome DevTools、Remote Debug…...
第八部分:阶段项目 6:构建 React 前端应用
现在,是时候将你学到的 React 基础知识付诸实践,构建一个简单的前端应用来模拟与后端 API 的交互了。在这个阶段,你可以先使用模拟数据,或者如果你的后端 API(阶段项目 5)已经搭建好,可以直接连…...
Vue 3 + WebSocket 实战:公司通知实时推送功能详解
📢 Vue 3 WebSocket 实战:公司通知实时推送功能详解 📌 收藏 点赞 关注,项目中要用到推送功能时就不怕找不到了! 实时通知是企业系统中常见的功能,比如:管理员发布通知后,所有用户…...
基于开源AI智能名片链动2 + 1模式S2B2C商城小程序的沉浸式体验营销研究
摘要:在消费市场竞争日益激烈的当下,传统体验营销方式存在诸多局限。本文聚焦开源AI智能名片链动2 1模式S2B2C商城小程序,探讨其在沉浸式体验营销中的应用。通过对比传统品鉴、工厂参观等初级体验方式,分析沉浸式体验的优势与价值…...
内窥镜检查中基于提示的息肉分割|文献速递-深度学习医疗AI最新文献
Title 题目 Prompt-based polyp segmentation during endoscopy 内窥镜检查中基于提示的息肉分割 01 文献速递介绍 以下是对这段英文内容的中文翻译: ### 胃肠道癌症的发病率呈上升趋势,且有年轻化倾向(Bray等人,2018&#x…...
react菜单,动态绑定点击事件,菜单分离出去单独的js文件,Ant框架
1、菜单文件treeTop.js // 顶部菜单 import { AppstoreOutlined, SettingOutlined } from ant-design/icons; // 定义菜单项数据 const treeTop [{label: Docker管理,key: 1,icon: <AppstoreOutlined />,url:"/docker/index"},{label: 权限管理,key: 2,icon:…...















