flutter 五点一：MaterialApp Theme

2024-01-18 17:20
文章标签 flutter theme 五点 materialapp

本文主要是介绍flutter 五点一：MaterialApp Theme，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

ThemeData

  factory ThemeData({bool? applyElevationOverlayColor,  //material2的darkTheme下 增加一个半透明遮罩 来凸显阴影效果  material3下无效   貌似没啥用NoDefaultCupertinoThemeData? cupertinoOverrideTheme,  //ios组件样式  Iterable<ThemeExtension<dynamic>>? extensions,  //自定义颜色  可用于统一颜色处理InputDecorationTheme? inputDecorationTheme,   //TextField的主题样式MaterialTapTargetSize? materialTapTargetSize,   //配置可点击的weight 的点击目标和布局大小PageTransitionsTheme? pageTransitionsTheme,  //定义页面过度动画...
}

extensions

  • Iterable<ThemeExtension>? extensions
  • 自定义颜色 可用于统一颜色处理 （定一个常量类不是更简单么 em…）
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';main(){runApp(const MyApp());
}class MyApp extends StatelessWidget{const MyApp();@overrideWidget build(BuildContext context) {
//定义不同的ThemeDataThemeData themeRed = ThemeData.light().copyWith(extensions: <ThemeExtension<ThemeColors>>[ThemeColors(themeType: 0)],);ThemeData themeGreen = ThemeData.light().copyWith(extensions: <ThemeExtension<ThemeColors>>[ThemeColors(themeType: 1)],);ThemeData themeBlue = ThemeData.light().copyWith(extensions: <ThemeExtension<ThemeColors>>[ThemeColors(themeType: 2)],);return MaterialApp(theme: themeBlue,   //使用ThemeData  显示不同的颜色home: A(),);}void changeTheme(){}
}class ThemeColors extends ThemeExtension<ThemeColors>{static String main_color = "main_color";static String text_color = "text_color";static String text_background = "text_background";var themeType = 0;var themeRed = {main_color:Colors.red,text_color:const Color(0xFFD26161),text_background:const Color(0xFFEAE4E4),};var themeGreen = {main_color:Colors.green,text_color:const Color(0xFF6EDC9A),text_background:const Color(0xFFEAE4E4),};var themeBlue = {main_color:Colors.blue,text_color:const Color(0xFF6F83E7),text_background:const Color(0xFFEAE4E4),};ThemeColors({this.themeType = 0});ThemeColors.themeRed(this.themeRed);ThemeColors.themeGreen(this.themeGreen);ThemeColors.themeBlue(this.themeBlue);@overrideThemeExtension<ThemeColors> copyWith() {var result = null;switch(this.themeType){case 0:result = ThemeColors.themeRed(themeRed);break;case 1:result = ThemeColors.themeGreen(themeGreen);break;case 2:result = ThemeColors.themeBlue(themeBlue);break;}return result;}@overrideThemeExtension<ThemeColors> lerp(covariant ThemeExtension<ThemeColors>? other, double t) {if(other !is ThemeColors){return this;}var result = null;switch(this.themeType){case 0:result = ThemeColors.themeRed(themeRed);break;case 1:result = ThemeColors.themeGreen(themeGreen);break;case 2:result = ThemeColors.themeBlue(themeBlue);break;}return result;}Color getColor(String colorName){var resultMap = null;switch(this.themeType){case 0:resultMap = themeRed;break;case 1:resultMap = themeGreen;break;case 2:resultMap = themeBlue;break;}return resultMap[colorName];}}class A extends StatefulWidget{A(){print("A页面启动！");}@overrideState<StatefulWidget> createState() => AState();
}class AState extends State<A>{@overrideWidget build(BuildContext context) {ThemeColors themeColors = Theme.of(context).extension<ThemeColors>()??ThemeColors(themeType: 0);return Scaffold(backgroundColor: themeColors.getColor(ThemeColors.main_color),  //背景色使用主题的颜色);}
}

结果
theme: themeRed, //红色
theme: themeGreen, //绿色
theme: themeBlue, //蓝色
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

inputDecorationTheme

  • 输入框的样式 定义输入框各种显示样式及交互样式
 ThemeData themeBlue = ThemeData.light().copyWith(extensions: <ThemeExtension<ThemeColors>>[ThemeColors(themeType: 2)],inputDecorationTheme: InputDecorationTheme(labelStyle: TextStyle(color: Colors.black),  //黑字hintStyle: TextStyle(color: Colors.grey),  //hint字体 灰色border: UnderlineInputBorder(),    //底部划线边框focusedBorder: UnderlineInputBorder(),));

属性

const InputDecorationTheme({this.labelStyle,this.floatingLabelStyle,this.helperStyle,this.helperMaxLines,this.hintStyle,this.errorStyle,this.errorMaxLines,this.floatingLabelBehavior = FloatingLabelBehavior.auto,this.floatingLabelAlignment = FloatingLabelAlignment.start,this.isDense = false,this.contentPadding,this.isCollapsed = false,this.iconColor,this.prefixStyle,this.prefixIconColor,this.suffixStyle,this.suffixIconColor,this.counterStyle,this.filled = false,this.fillColor,this.activeIndicatorBorder,this.outlineBorder,this.focusColor,this.hoverColor,this.errorBorder,this.focusedBorder,this.focusedErrorBorder,this.disabledBorder,this.enabledBorder,this.border,this.alignLabelWithHint = false,this.constraints,});

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/7

在这里插入图片描述

materialTapTargetSize

  • 组件最小点击区域
  • 取值 如下
enum MaterialTapTargetSize {/// Expands the minimum tap target size to 48px by 48px.  将最小点击目标大小扩展为 48px x 48px。////// This is the default value of [ThemeData.materialTapTargetSize] and the/// recommended size to conform to Android accessibility scanner/// recommendations.padded,/// Shrinks the tap target size to the minimum provided by the Material  将点击目标尺寸缩小到Material 规范提供的最小值。/// specification.shrinkWrap,
}

pageTransitionsTheme

  • 页面切换动画
  • 切换动画支持 android ios macos
    在这里插入图片描述

默认页面切换动画
请添加图片描述

修改后的切换动画 从下往上顶出动画

 pageTransitionsTheme:PageTransitionsTheme(builders: <TargetPlatform, PageTransitionsBuilder>{TargetPlatform.android:OpenUpwardsPageTransitionsBuilder()}),

请添加图片描述
自定义页面切换动画

class MyPageTransitionsBuilder extends PageTransitionsBuilder {@override![请添加图片描述](https://img-blog.csdnimg.cn/direct/8874fd6cec764fa4a1b042b4d46bb67d.gif)Widget buildTransitions<T>(PageRoute<T>? route,BuildContext? context,Animation<double> animation,    //显示页面执行的动画Animation<double> secondaryAnimation,   //隐藏页面执行的动画Widget? child,) {return ScaleTransition(   //缩放动画  scale: animation,child: RotationTransition(  //旋转动画turns: animation,child: child,),);}
}

结果：B页面旋转放大显示
请添加图片描述
若 return改为如下

return ScaleTransition(  //B页面放大scale: animation,child: RotationTransition(   //A页面旋转turns: secondaryAnimation,child: child,),);

效果如下
请添加图片描述
其它类型动画 改变return即可 或可仿照系统默认切换动画类改造自己想要的动画

return SizeTransition(sizeFactor: animation,child: SizeTransition(sizeFactor: animation,child: child,),);

请添加图片描述

全部代码


import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';main(){runApp(const MyApp());
}class MyApp extends StatelessWidget{const MyApp();@overrideWidget build(BuildContext context) {ThemeData themeRed = ThemeData.light().copyWith(extensions: <ThemeExtension<ThemeColors>>[ThemeColors(themeType: 0)],);ThemeData themeGreen = ThemeData.light().copyWith(extensions: <ThemeExtension<ThemeColors>>[ThemeColors(themeType: 1)],);ThemeData themeBlue = ThemeData.light().copyWith(extensions: <ThemeExtension<ThemeColors>>[ThemeColors(themeType: 2)],inputDecorationTheme: InputDecorationTheme(labelStyle: TextStyle(color: Colors.black),hintStyle: TextStyle(color: Colors.grey),border: UnderlineInputBorder(),focusedBorder: UnderlineInputBorder(),),materialTapTargetSize:MaterialTapTargetSize.shrinkWrap,pageTransitionsTheme:PageTransitionsTheme(builders: <TargetPlatform, PageTransitionsBuilder>{TargetPlatform.android:MyPageTransitionsBuilder()}),);return MaterialApp(theme: themeBlue,home: A(),routes: {"/A": (context) => A(),"/B": (context) => B(),"/C": (context) => C(),},);}void changeTheme(){}
}class ThemeColors extends ThemeExtension<ThemeColors>{static String main_color = "main_color";static String text_color = "text_color";static String text_background = "text_background";var themeType = 0;var themeRed = {main_color:Colors.red,text_color:const Color(0xFFD26161),text_background:const Color(0xFFEAE4E4),};var themeGreen = {main_color:Colors.green,text_color:const Color(0xFF6EDC9A),text_background:const Color(0xFFEAE4E4),};var themeBlue = {main_color:Colors.blue,text_color:const Color(0xFF6F83E7),text_background:const Color(0xFFEAE4E4),};ThemeColors({this.themeType = 0});ThemeColors.themeRed(this.themeRed);ThemeColors.themeGreen(this.themeGreen);ThemeColors.themeBlue(this.themeBlue);@overrideThemeExtension<ThemeColors> copyWith() {var result = null;switch(this.themeType){case 0:result = ThemeColors.themeRed(themeRed);break;case 1:result = ThemeColors.themeGreen(themeGreen);break;case 2:result = ThemeColors.themeBlue(themeBlue);break;}return result;}@overrideThemeExtension<ThemeColors> lerp(covariant ThemeExtension<ThemeColors>? other, double t) {if(other !is ThemeColors){return this;}var result = null;switch(this.themeType){case 0:result = ThemeColors.themeRed(themeRed);break;case 1:result = ThemeColors.themeGreen(themeGreen);break;case 2:result = ThemeColors.themeBlue(themeBlue);break;}return result;}Color getColor(String colorName){var resultMap = null;switch(this.themeType){case 0:resultMap = themeRed;break;case 1:resultMap = themeGreen;break;case 2:resultMap = themeBlue;break;}return resultMap[colorName];}}class A extends StatefulWidget{A(){print("A页面启动！");}@overrideState<StatefulWidget> createState() => AState();
}class AState extends State<A>{@overrideWidget build(BuildContext context) {ThemeColors themeColors = Theme.of(context).extension<ThemeColors>()??ThemeColors(themeType: 0);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(100))),),TextButton(onPressed: (){Navigator.pushNamed(context, '/C');}, child: Text("C"),style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.red),padding: MaterialStateProperty.all(EdgeInsets.all(100)),),),],),),);}
}class B extends StatefulWidget{B(){print("B页面启动！");}@overrideState<StatefulWidget> createState() => BState();
}class BState extends State<B>{@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: Text("BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB"),),);}
}class C extends StatefulWidget{@overrideState<StatefulWidget> createState() => CState();
}class CState extends State<C>{@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: Text("CCCCCCCCCCCCCCCCCCCCCCCCC"),),);}
}class MyPageTransitionsBuilder extends PageTransitionsBuilder {@overrideWidget buildTransitions<T>(PageRoute<T>? route,BuildContext? context,Animation<double> animation,Animation<double> secondaryAnimation,Widget? child,) {// return ScaleTransition(//   scale: animation,//   child: RotationTransition(//     turns: secondaryAnimation,//     child: child,//   ),// );return SizeTransition(sizeFactor: animation,child: SizeTransition(sizeFactor: animation,child: child,),);}
}

其他分享

  • 学习过程中最大的方式就是查看源码
    比如pageTransitionsTheme 此属性传什么值 怎么传
    Android Studio 使用 Ctrl+左键
    在这里插入图片描述

Ctrl+左键 点击
在这里插入图片描述
需要一个 builders参数
并且有个 defalutBuilder
基本上可以知道怎么使用

再加上 百度/google 搞定！

这篇关于flutter 五点一：MaterialApp Theme的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/619714。

相关文章

鸿蒙开发搭建flutter适配的开发环境

鸿蒙开发搭建flutter适配的开发环境

《鸿蒙开发搭建flutter适配的开发环境》文章详细介绍了在Windows系统上如何创建和运行鸿蒙Flutter项目,包括使用flutterdoctor检测环境、创建项目、编译HAP包以及在真机上运... 目录环境搭建创建运行项目打包项目总结环境搭建1.安装 DevEco Studio NEXT IDE
阅读更多...
Flutter 进阶：绘制加载动画

Flutter 进阶：绘制加载动画

绘制加载动画：由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类：LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态，而 LoadingPainter 则负责绘制动画。
阅读更多...
Flutter Button使用

Flutter Button使用

Material 组件库中有多种按钮组件如ElevatedButton、TextButton、OutlineButton等，它们的父类是于ButtonStyleButton。         基本的按钮特点：         1.按下时都会有“水波文动画”。         2.onPressed属性设置点击回调，如果不提供该回调则按钮会处于禁用状态，禁用状态不响应用户点击。
阅读更多...
flutter开发实战-flutter build web微信无法识别二维码及小程序码问题

flutter开发实战-flutter build web微信无法识别二维码及小程序码问题

flutter开发实战-flutter build web微信无法识别二维码及小程序码问题 GitHub Pages是一个直接从GitHub存储库托管的静态站点服务，‌它允许用户通过简单的配置，‌将个人的代码项目转化为一个可以在线访问的网站。‌这里使用flutter build web来构建web发布到GitHub Pages。 最近通过flutter build web，通过发布到GitHu
阅读更多...
Flutter 中的低功耗蓝牙概述

Flutter 中的低功耗蓝牙概述

随着智能设备数量的增加，控制这些设备的需求也在增加。对于多种使用情况，期望设备在需要进行控制的同时连接到互联网会受到很大限制，因此是不可行的。在这些情况下，使用低功耗蓝牙（也称为 Bluetooth LE 或 BLE）似乎是最佳选择，因为它功耗低，在我们的手机中无处不在，而且无需连接到更广泛的网络。因此，蓝牙应用程序的需求也在不断增长。 通过阅读本文，您将了解如何开始在 Flutter 中开
阅读更多...
flutter开发多端平台应用的探索 下 （跨模块、跨语言通信之平台通道）

flutter开发多端平台应用的探索 下 （跨模块、跨语言通信之平台通道）

前文 Flutter 是一个跨平台的开发框架，它允许开发者使用相同的代码库来构建 iOS、Android、Web 和桌面应用程序。 上文flutter开发多端平台应用的探索 上（基本操作）-CSDN博客列举了一些特定平台的case（桌面端菜单，鼠标快捷键）的使用方法，有些是flutter提供了对应能力，只需要学习如何调API，有些事三方库支持，本文要探讨的平台通道是更为强大的工具，很多三方插件
阅读更多...
Flutter-使用dio插件请求网络（get ,post,下载文件）

Flutter-使用dio插件请求网络（get ,post,下载文件）

引入库：dio: ^2.1.13可直接运行的代码：包含了post，get 下载文件import 'package:flutter/material.dart';import 'package:dio/dio.dart';void main() {runApp(new MaterialApp(title: 'Container demo',home: new visitNetPage(),)
阅读更多...
Flutter-Warning! This package referenced a Flutter repository via the .packages file that is no long

Flutter-Warning! This package referenced a Flutter repository via the .packages file that is no long

android studio中修改了diart sdk路径，需要执行以下步骤：
阅读更多...
Flutter-选择附件，图片，视频。file_picker

Flutter-选择附件，图片，视频。file_picker

仅供参考： 引入插件： file_picker: ^1.3.8 按照返回值，分了三组： // Single file path String filePath;第一组：返回文件地址 //选择任何文件 filePath = await FilePicker.getFilePath(type: FileType.ANY); // will let you pick one file path, fr
阅读更多...
Flutter-图表显示charts_flutter

Flutter-图表显示charts_flutter

引入插件： charts_flutter: ^0.4.0 ChartFlutterBean import 'package:charts_flutter/flutter.dart';import 'package:myself_project/OrdinalSales%20.dart';class ChartFlutterBean {static List<Series<TimeSer
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2