flutter 五点一:MaterialApp Theme

这篇具有很好参考价值的文章主要介绍了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();

  @override
  Widget build(BuildContext context) {
//定义不同的ThemeData
    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)],
    );

     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);

  @override
  ThemeExtension<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;
  }

  @override
  ThemeExtension<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页面启动!");
  }

  @override
  State<StatefulWidget> createState() => AState();
}

class AState extends State<A>{
  @override
  Widget 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, //蓝色
flutter 五点一:MaterialApp Theme,flutter
flutter 五点一:MaterialApp Theme,flutter
flutter 五点一:MaterialApp Theme,flutter

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,
  });

flutter 五点一:MaterialApp Theme,flutter

flutter 五点一:MaterialApp Theme,flutter

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
    flutter 五点一:MaterialApp Theme,flutter

默认页面切换动画
flutter 五点一:MaterialApp Theme,flutter

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

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

flutter 五点一:MaterialApp Theme,flutter
自定义页面切换动画

class MyPageTransitionsBuilder extends PageTransitionsBuilder {

  @overrideflutter 五点一:MaterialApp Theme,flutter

  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页面旋转放大显示
flutter 五点一:MaterialApp Theme,flutter
若 return改为如下

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

效果如下
flutter 五点一:MaterialApp Theme,flutter
其它类型动画 改变return即可 或可仿照系统默认切换动画类改造自己想要的动画

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

flutter 五点一:MaterialApp Theme,flutter

全部代码


import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

main(){
  runApp(const MyApp());
}

class MyApp extends StatelessWidget{

  const MyApp();

  @override
  Widget 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);

  @override
  ThemeExtension<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;
  }

  @override
  ThemeExtension<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页面启动!");
  }

  @override
  State<StatefulWidget> createState() => AState();
}

class AState extends State<A>{
  @override
  Widget 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页面启动!");
  }

  @override
  State<StatefulWidget> createState() => BState();
}

class BState extends State<B>{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB"),
      ),
    );
  }
}

class C extends StatefulWidget{
  @override
  State<StatefulWidget> createState() => CState();
}

class CState extends State<C>{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("CCCCCCCCCCCCCCCCCCCCCCCCC"),
      ),
    );
  }
}


class MyPageTransitionsBuilder extends PageTransitionsBuilder {

  @override
  Widget 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+左键
    flutter 五点一:MaterialApp Theme,flutter

Ctrl+左键 点击
flutter 五点一:MaterialApp Theme,flutter
需要一个 builders参数
并且有个 defalutBuilder
基本上可以知道怎么使用

再加上 百度/google 搞定!文章来源地址https://www.toymoban.com/news/detail-800530.html

到了这里,关于flutter 五点一:MaterialApp Theme的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 二阶椭圆型第一边值问题的数值解法(五点差分格式和有限体积法)附matlab代码

    这里我们介绍五点差分格式和有限体积法求椭圆型第一边值问题, 题目: 分别采用矩形网格的五点差分格式和有限体积法求椭圆型第一边值问题, − ∂ 2 u ∂ x 2 − ∂ 2 u ∂ y 2 + a ∂ u ∂ x = 0 , a 0 , -frac{partial^2u}{partial x^2}-frac{partial^2u}{partial y^2}+afrac{partial u}{partial x}

    2023年04月22日
    浏览(19)
  • Android style(样式) 和 theme(主题) 属性

            样式和主题资源都可用于对Android UI组件进行“美化”,只要充分利用好这两个属性资源,我们可以开发出各种风格的应用界面。         style 样式: 一个样式相当于多个格式的集合,其他UI组件通过style属性来指定样式,样式资源文件时放在/res/values/styles.xm

    2023年04月12日
    浏览(19)
  • magento2 二次开发如何自定义theme

    2024年02月15日
    浏览(16)
  • 如何下载IDEA主题插件Material Theme UI?

    1、打开IDEA插件官网:点击这里,选择IDEA对应的版本下载。我的IDEA版本是2021.3,即我应下载对应的版本6.16.2 2、分别点击IDEA左上角 File - Settings - Plugins - 设置 - install Plugin from Disk… ,从你的电脑里导入刚下载的压缩包Material_Theme_UI-6.16.2 3、( 注意 :路径不能有中文)我的路

    2024年04月26日
    浏览(29)
  • MidJourney笔记(9)-daily_theme-docs-describe

    切换 #daily-theme 频道更新的通知 。 但我发现在对话框那里,是没有这个命令的: 但官网是有介绍,不知道是不是版本问题还是这个命令已经无效。 但后来,我发现这个命令是要在Midjourney服务对话框那里才有,在我们后面添加的Mid

    2024年02月04日
    浏览(19)
  • IDEA 插件 Material Theme UI收费后 免费的办法

    使用手动安装的方式 1.在官网找到10之前的版本,下载插件 https://plugins.jetbrains.com/plugin/8006-material-theme-ui/versions 6点10以下的就可以 2.手动在idea进行插件导入 重启idea即可使用主题了

    2024年02月13日
    浏览(25)
  • R语言【cli】——builtin_theme():内置的CLI主题

    Package  cli  version 3.6.0 此主题始终处于活动状态,并且位于主题堆栈的底部。 参数【dark】 :是否使用黑暗主题。cli.theme_dark选项可用于显式请求暗主题。如果没有设置,或者设置为“auto”,那么cli会尝试检测暗主题,这在最近的RStudio版本和macOS上的term中都有效。 一个命名

    2024年01月25日
    浏览(21)
  • 博客搭建教程Github+Hexo+hexo-theme-matery主题

    前情提要 写这篇文的目的 记录自己搭建过程,便于以后快速复用 总结经验和自己踩的坑,给其他小伙伴一些参考(由于是搭建后写的,所以没有参考图片) 介绍 初步效果参考我的博客:hermia的个人博客 本博客基于Hexo框架,使用github托管 使用自定义域名: hermiablog.com hexo主题

    2024年02月19日
    浏览(24)
  • 【Android-JetpackCompose】11、主题设置:Theme、Colors、Typography、Shapes

    首先,从下面的仓库克隆代码: Material Design 定义了一些从语义上命名的颜色: primary 是主要品牌颜色,secondary 用于提供强调色。您可以为形成对比的区域提供颜色更深/更浅的变体。background 和 surface 这两种颜色用于那些容纳在概念上驻留在应用“Surface”的组件的容器。此外

    2024年02月05日
    浏览(20)
  • vue2实现自定义主题webpack-theme-color-replacer

    需求:根据element的自定义主题色,之后改变element的全局所有颜色,解决页面刷新后主题色失效问题,这个需要把颜色存入到浏览器的存储中,如果换个浏览器就得重新选择了哈,如果需要在不同的浏览器保持一致的主题,需要跟后端沟通 之前还写过一个简单的,有需要的可

    2024年02月07日
    浏览(19)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包