Flutter实现一个支持渐变背景的Button示例详解

2024-01-28 23:28:53

Flutter中的按钮

自Flutter 1.20 新增了ButtonStyleButton 系列按钮，可以说非常好用了，默认样式比之前漂亮了许多，扩展性也增加了很多。按钮样式统一由ButtonStyle这个类提供，支持根据各种状态(MaterialState)变化的属性，也增强了桌面平台也友好性。

值	状态
hovered	鼠标滑入
focused	焦点
pressed	按下
dragged	拖动
selected	选中
scrolledUnder	与滚动内容叠加
disabled	不可用
error	错误

最常用到的就是pressed和disabled还有桌面端的hovered。

可变化的属性

属性	说明	备注
backgroundColor	背景色	Flutter3.3版本之前对应 primary或onPrimary
foregroundColor	前景色(文本颜色)	Flutter3.3版本之前对应 primary或onPrimary
elevation	模拟物理深度	其实就是阴影浅重
fixedSize	按钮尺寸	受最大尺寸和最小尺寸和布局影响
maxinumSize	最大尺寸
minimumSize	最小尺寸
mouseCursor	鼠标图标
overlayColor	高亮色
padding	内容边距
shadowColor	阴影颜色
shape	按钮形状	由OutlinedBorder定义
side	边框样式
surfaceTintColor	Material3使用的材质颜色
textStyle	文本样式

可以看到默认按钮样式，主要针对的是形状，颜色和交互效果(overlay splash)，普通情况下也够用的。

不完美的地方

但是，要想进一步定制按钮效果，比如设计师提供的按钮，是渐变色的，那怎么办呢？比较常见的做法是用Container自己写一个按钮出来。Container的decoration可以说非常好用了，支持单色，渐变，以及装饰图。AnimatedContainer还能对各种属性做动画展现。

但是按钮要做的事情，不止是一个背景这么简单。比如上面提到的状态，以及点击反馈，语义化等等。要使用Container把这一整套实现出来，会非常繁琐。

在child中处理

Button的child可以是任何Widget，那么，把Container放到child里来实现定制背景怎样呢？且不说Button默认的padding之类的，Button的效果，都是在背景层实现的，child中的任何可见元素，都会覆盖在这层背景之上。简单来说，就是覆盖背景的同时会覆盖掉Button的Splash等overlay效果。

外面套一个wrapper

把Button套进Container里，在Container的decoration中做背景。这个方法首先要做的就是把Button的背景和阴影去除，那么除了在Container里做背景，还要模拟出Button的阴影。

AnimatedContainer(
  duration: Duration(milliseconds:200),
  width: width,
  height: height,
  transformAlignment: Alignment.center,
  clipBehavior: clipBehavior,
  decoration: BoxDecoration(
    gradient: LinearGradient(
    colors: [Colors.blue,Colors.red]
    ),
    shadow: [BoxShadow(
    ...
    )]
  ),
  child: ElevatedButton(
  //...
  ),
);

初步来看，这个方法还是可行的。重点就在于怎么把需要增强的属性组织起来，并且和按钮的状态结合起来了。

MaterialStateProperty

按钮的动态属性，都是基于这个状态属性处理的，它可以根据当前的属性集合，匹配到合适的属性提供回来。

MaterialStatesController

按钮状态的控制器，可以通过这个控制器来监听按钮的状态，做出对应处理

边距问题

ButtonStyle中有一个tapTargetSize属性(非动态属性)，定义了点击目标的扩展边距，在移动设备上默认情况下按钮会向上/下多出一点边距，导致Container的背景比按钮尺寸多出一块，按钮的overlay效果铺不满，手动指定TapTargetSize.shrinkWrap就可以了。

EnhancedButton

结合以上想法，整理了style及wrapper实现了一个增加的按钮，效果如下

本来命名的ExtendedButton，结果被一个不维护的包占用了名字，就改成了EnhancedButton。虽然目前还有些许不完美的方面，以后再慢慢优化吧。

github: github.com/shirne/exte…

pub: pub.flutter-io.cn/packages/en…

以上就是Flutter实现一个支持渐变背景的Button示例详解的详细内容，更多关于Flutte 渐变背景 Button的资料请关注我们其它相关文章！

详解flutter中常用的container layout实例

目录简介 Container的使用旋转Container Container中的BoxConstraints 总结简介在上一篇文章中,我们列举了flutter中的所有layout类,并且详细介绍了两个非常常用的layout:Row和Column. 掌握了上面两个基本的layout还是不够的,如果需要应付日常的layout使用,我们还需要掌握多一些layout组件.今天我们会介绍一个功能强大的layout:Container layout. Container的使用 Container是一
Android Flutter实现精灵图的使用详解

目录前言如何使用精灵图自定义实现加载 Flame加载精灵图前言在日常开发中遇到的图片展示一般是静态图和Gif图两种形式(静态和动态的不同).与此同时当需要对图片做效果时让其动起来,常用方案是Gif图播放或者是帧动画(多种静态图轮询播放).但在游戏开发中还有一种动图表现形式叫做Sprite图(雪碧图),其在前端开发中也是很常见.为什么需要使用精灵图,因为每张图片显示都需要去发起请求获取,若页面图片数量较多(一个页面有几十个小图)并发请求将是一个大数量级,可能会造成页面加载速度降低,精灵图
Flutter 异步编程之单线程下异步模型图文示例详解

目录一. 本专栏图示概念规范 1. 任务概念规范 2. 任务的状态 3. 时刻与时间线 4.同步与异步二.理解单线程中的异步任务 1. 任务的分配 2.异步任务特点 3. 异步任务完成与回调三. Dart 语言中的异步 1.编程语言中与异步模型的对应关系 2.Dart 编程中的异步任务 3.当前任务分析四.异步模型的延伸 1. 单线程异步模型的局限性 2. 多线程与异步的关系 3. Dart 中如何解决单线程异步模型的局限性一. 本专栏图示概念规范本专栏是对异步编程的系统探索,会
Flutter 假异步的实现示例

就像 android 有 handle 一样,消息队列这东西好像还真是系统必备,Flutter 也有自己的消息队列,只不过队列直接封装在了 Dart 的线程类型 Isolate 里面了,不过 Flutter 还是提供了 Futrue 这个 API 来专门来操作各种消息,以及实现基于消息队列的假异步 Flutter 的"异步"机制这里的异步是加了引号的,可见此异步非真异步,而是假异步.Flutter 的异步不是开新线程,而是往所属线程的消息队列中添加任务,当然大家也可以按上文那
Flutter学习LogUtil封装与实现实例详解

目录一. 为什么要封装打印类二. 需要哪些类三. 打印输出的抽象类四. 格式化日志内容格式化堆栈堆栈裁切工具类格式化堆栈信息格式化JSON 五. 需要用到的常量六. 为了控制多个打印器的设置做了一个配置类七. Log的管理类九. 调用LogUtil 十. 定义一个Flutter 控制台打印输出的方法十一. 现在使用前初始化log打印器一次使用一. 为什么要封装打印类虽然 flutter/原生给我们提供了日志打印的功能,但是超出一定长度以后会被截断 Json打印挤在一
flutter使用tauri实现一个一键视频转4K软件

目录前言开发原因工作原理开发过程前言先说结论,tauri是一个非常优秀的前端桌面开发框架,但是,rust门槛太高了. 一开始我是用electron来开发的,但是打包后发现软件运行不是很流畅,有那么一点卡顿.于是为了所谓的性能,我尝试用tauri来做我的软件.在学了两星期的rust后,我发现rust真的太难学了,最后硬是边做边查勉强做出来了. 软件运行起来是比electron做的丝滑很多,但是写rust真的是很痛苦,rust的写法和其他语言是截然不同的,在不知道之前我是个rust吹,觉
Flutter实现一个支持渐变背景的Button示例详解

目录 Flutter中的按钮不完美的地方在child中处理外面套一个wrapper MaterialStateProperty MaterialStatesController 边距问题 EnhancedButton Flutter中的按钮自Flutter 1.20 新增了ButtonStyleButton 系列按钮,可以说非常好用了,默认样式比之前漂亮了许多,扩展性也增加了很多.按钮样式统一由ButtonStyle这个类提供,支持根据各种状态(MaterialState)变化的属性,也
Flutter实现自定义下拉选择框的示例详解

在一些列表页面中,我们经常会有上方筛选项的的需求,点击出现一个下拉菜单,多选.单选.列表选等,而在Flutter中,并没有现成的这样的组件,找第三方的扩展有时候又会受到一定限制,所以最好我们可以自己做一个,这样即使扩展我们也会得心应手. 先看效果图: 关键点:弹出.收回动画.状态改变.选项联动思路: 我们可以看到一个完整的下拉框有头部和具体的下拉选项两部分组成,头部又和下拉组进行了联动, 把头部当做1个数组,下方选项作为1个数组,两个数组数量一致之间形成一个完整的下拉选择框可以更好的控制联动效
flutter中的资源和图片加载示例详解

目录封面图指定相应的资源资源绑定 Asset bundling 资源变体加载资源加载文本资源加载图片加载依赖包中的图片最后封面图下个季度的目标是把前端监控相关的内容梳理出来,梳理出来之后可能会在公司内部做个分享- Flutter应用程序既括代码也包括一些其他的资产,我们通常这些资产为资源. 有时候我会思考assets这个单词,在程序中到底应该翻译为资产呢?还是翻译为资源?按照习惯,我们这里还是称为资源好了- 这些资源是一些与应用程序捆绑在一起和并且部署应用时会用到的的文件,在
C语言嵌入式实现支持浮点输出的printf示例详解

目录简介背景 C语言可变参数函数踩坑功能实现简介 mr-printf 模块为 mr-library 项目下的可裁剪模块,以C语言编写,可快速移植到各种平台(主要以嵌入式mcu为主). mr-printf 模块用以替代 libc 中 printf, 可在较小资源占用的同时支持绝大部分 printf 功能,于此同时还支持对单独功能模块的裁剪以减少用户不需要功能的资源占用. 背景 printf 大家应该使用的比较多,但是在嵌入式平台中,尤其是单片机中,libc中的printf对内存的占用较高
利用Python打造一个多人聊天室的示例详解

一.实验名称建立聊天工具二.实验目的掌握Socket编程中流套接字的技术,实现多台电脑之间的聊天. 三.实验内容和要求 vii.掌握利用Socket进行编程的技术 viii.必须掌握多线程技术,保证双方可以同时发送 ix.建立聊天工具 x.可以和多个人同时进行聊天 xi.必须使用图形界面,显示双方的语录四.实验环境 PC多台,操作系统Win7,win10(32位.64位) 具备软件python3.6 . 五.操作方法与实验步骤服务端 1.调入多线程.与scoket包,用于实现多线程连接
flutter实现一个列表下拉抽屉的示例代码

目录使用源码使用通过监听滚动事件实现DragOpenDrawer 组件,可以给滚动组件添加一个下拉抽屉.其使用方式如下: DragOpenDrawer( openDuration: Duration(microseconds: 900), closeDuration: Duration(milliseconds: 300), onOpen: (){ print("onOpen"); }, child: Column( children: [
Flutter常用的布局和事件示例详解

Flutter 项目中常用的布局详情,及封装和使用,快速开发项目. 以及手势事件和滚动事件的使用 Scaffold 导航栏的实现,有些路由页可能会有抽屉菜单(Drawer)以及底部Tab导航菜单等 const Scaffold({ Key key, this.appBar,//标题栏 this.body,//内容 this.floatingActionButton,//悬浮按钮 this.persistentFooterButtons,//底部持久化现实按钮 this.drawer,//侧滑菜单
Android Flutter实现五种酷炫文字动画效果详解

目录前言波浪涌动效果波浪线跳动文字组彩虹动效滚动广告牌效果打字效果其他效果自定义效果总结前言偶然逛国外博客,看到了一个介绍文字动画的库,进入 pub 一看,立马就爱上这个动画库了,几乎你能想到的文字动画效果它都有!现在正式给大家安利一下这个库:animated_text_kit.本篇我们介绍几个酷炫的效果,其他的效果大家可以自行查看官网文档使用. 波浪涌动效果波浪涌动上面的动画效果只需要下面几行代码,其中loadUntil用于控制波浪最终停留的高度,取值是0-1.0,如
Flutter 中 Dart的Mixin示例详解

原文在这里.写的不错,推荐各位看原文. 这里补充一下Mixin的定义: 只要一个类是继承自Object的而且没有定义构造方法,那么这个类可以是一个Mixin了.当然,如果你想让mixin的定义更加的清晰,可以使用mixin关键字开头来定义.具体请参考这里原文截图体会一下风格. 正文在经典的面向对象编程语言里一定会有常规的类,抽象类和接口.当然,Dart也有它自己的接口,不过那是另外的文章要说的.有的时候阴影里潜伏者另外的野兽:Mixin!这是做什么的,如何使用?我们来一起发现. 没有mixi
使用JSP技术实现一个简单的在线测试系统的实例详解

1.登陆界面实现: 本界面由三部分构成,Footer.jsp,Index.jsp,Header.jsp Header.jsp <center> <h2>在线测试系统</h2> <p> <a href="Index.jsp" rel="external nofollow" >登录</a> | <a href="test.jsp" rel="external n