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

目录
  • Flutter中的按钮
  • 不完美的地方
  • 在child中处理
  • 外面套一个wrapper
    • MaterialStateProperty
    • MaterialStatesController
    • 边距问题
  • EnhancedButton

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的资料请关注我们其它相关文章!

时间: 2022-09-12

Android Flutter实现精灵图的使用详解

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

Flutter 异步编程之单线程下异步模型图文示例详解

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

详解flutter中常用的container layout实例

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

Flutter学习LogUtil封装与实现实例详解

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

Flutter 假异步的实现示例

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

flutter使用tauri实现一个一键视频转4K软件

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

5分钟搭建一个WebRTC视频聊天

在上篇文章给大家介绍了在Ubuntu上搭建一个基于webrtc的多人视频聊天服务实例代码详解,感兴趣的朋友可以参考下.今天给大家分享一篇关于5分钟搭建一个WebRTC视频聊天. 百度一下WebRTC,我想也是一堆.本以为用这位朋友( 搭建WebRtc环境 )的SkyRTC-demo 就可以一马平川的实现聊天,结果折腾了半天,文本信息都发不出去,更别说视频了.于是自己动手. 想在公网上实现视频通信,需要下面3个核心元素: 一个是NAT穿透服务器(ICE Server),实现内网穿透,具体的作用可以

一个Vue视频媒体多段裁剪组件的实现示例

近日项目有个新需求,需要对视频或音频进行多段裁剪然后拼接.例如,一段视频长30分钟,我需要将5-10分钟.17-22分钟.24-29分钟这三段拼接到一起成一整段视频.裁剪在前端,拼接在后端. 网上简单找了找,基本都是客户端内的工具,没有纯网页的裁剪.既然没有,那就动手写一个. 代码已上传到GitHub: https://github.com/fengma1992/media-cut-tool 废话不多,下面就来看看怎么设计的. 效果图 图中底部的功能块为裁剪工具组件,上方的视频为演示用,当然也能

做了一个flash视频墙[附源文件与xml文件]

作者:dickmaoas代码: 复制代码 代码如下: //design by dickmao 2007.1 fscommand("showmenu", "false"); import mx.managers.DepthManager;//载入类 item = 1;//计数器,载入动画的个数 var mclListener = new Object();//侦听载入动做完成的侦听器 var mcLoader = new MovieClipLoader();//新建载

以视频爬取实例讲解Python爬虫神器Beautiful Soup用法

1.安装BeautifulSoup4 easy_install安装方式,easy_install需要提前安装 easy_install beautifulsoup4 pip安装方式,pip也需要提前安装.此外PyPi中还有一个名字是 BeautifulSoup 的包,那是 Beautiful Soup3 的发布版本.在这里不建议安装. pip install beautifulsoup4 Debain或ubuntu安装方式 apt-get install Python-bs4 你也可以通过源码安

iOS 本地视频和网络视频流播放实例代码

需求:最近公司需要做一个楼宇对讲的功能:门口机(连接WIFI)拨号对室内机(对应的WIFI)的设备进行呼叫,室内机收到呼叫之后将对收到的数据进行UDP广播的转发,手机(连接对应的WIFI)收到视频流之后,实时的展示视频数据(手机可以接听,挂断,手机接听之后,室内机不展示视频,只是进行转发.) 简单点说就是手机客户端需要做一个类似于直播平台的软件,可以实时的展示视频,实时的播放接收到的声音数据,并且实时将手机麦克风收到的声音回传给室内机,室内机负责转发给门口机. 之前从来做过视频播放都是本地文件的

IOS实现视频动画效果的启动图

先上效果图 实现思路 主要思路就是用一个控制器来作为播放视频的载体,然后在让这个控制器作为根视图,视频播放完成之后那就该干嘛干嘛了. 话不多说了,下面就放代码好了 先新建一个控制器AnimationViewController在控制器中新建一个属性moviePlayer,记得要先引入系统库<MediaPlayer/MediaPlayer.h> @property (nonatomic, strong) MPMoviePlayerController *moviePlayer; 设置movieP

.NET从优酷专辑中采集所有视频及信息(VB.NET代码)

这个方法就是提取优酷的专辑ID,然后一个个ID进行循环采集网页代码,从中提取title标签和VID,没什么技术含量.=..= 采集中应用.NET中的HttpWebRequest和HttpWebResponse类,代码分析用了正则表达式. 这个代码效率不是很好,一个网页的解析时间在0.5~2秒之间,不适合大量采集.也许将它转换成JavaScript速度会快一点吧. 暂时就研究这么多,代码直接发出来给大家共享一下. 代码VB.NET,新建一个窗体frmMain,添加一个TextBox,一个ListB

Android实现微信朋友圈发本地视频功能

一.前言 前一篇文章已经详细介绍了如何使用Xposed框架编写第一个微信插件:摇骰子和猜拳作弊器 本文继续来介绍如何使用Xposed框架编写第二个微信插件,可以将本地小视频发布到朋友圈的功能.在这之前我们还是要有老套路,准备工作要做好,这里还是使用微信6.3.9版本进行操作,准备工作: 1.使用apktool工具进行反编译,微信没有做加固防护,所以这个版本的微信包反编译是没有任何问题的. 2.借助于可视化反编译工具Jadx打开微信包,后续几乎重要分析都是借助这个工具来操作的. 二.猜想与假设 做

编写C++程序使DirectShow进行视频捕捉

视频捕捉Graph的构建 一个能够捕捉音频或者视频的graph图都称之为捕捉graph图.捕捉graph图比一般的文件回放graph图要复杂许多,dshow提供了一个Capture Graph Builder COM组件使得捕捉graph图的生成更加简单.Capture Graph Builder提供了一个ICaptureGraphBuilder2接口,这个接口提供了一些方法用来构建和控制捕捉graph. 首先创建一个Capture Graph Builder对象和一个graph manger对

IOS 开发之ios视频截屏的实现代码

IOS 开发之ios视频截屏的实现代码 现在好多视频截屏软件,这里提供一个IOS 视频截屏的方法,大家可以参考下, 实现代码: //截屏 static int i=0; -(IBAction)screenShot:(id)sender{ UIGraphicsBeginImageContextWithOptions(CGSizeMake(640, 960), YES, 0); [[self.window layer] renderInContext:UIGraphicsGetCurrentCont