自定义渐变背景按钮

文章目录

自定义渐变背景按钮
先看效果图
关键代码：
- 背景渐变色
- 点击触发水波纹
- 具体代码实现：
- 注意点

先看效果图

关键代码：

背景渐变色

BoxDecoration(gradient: const LinearGradient(colors: [Color(0xff5eb680),Color(0xff00acb6),Color(0xff00acb6),]),borderRadius: BorderRadius.circular(ScreenUtil().setHeight(44.0)),)

点击触发水波纹

InkWell：
组件大家应该知道点击会有水波纹效果；但是只有给背景设置了颜色，那么就没有效果了；这里解决方式：加入Ink，Material组件进行一个包裹，颜色背景设置给上层，具体代码如下：

具体代码实现：

import 'package:flutter/material.dart';
import 'package:flutter_ad/utils/screen_util.dart';
/** 登录注册的绿色长条形按钮* text 按钮为文字内容* top为按钮距离顶部控件的高度*/
class LoginButtonWidget extends StatefulWidget {final String text;final double top;final VoidCallback onTap;const LoginButtonWidget({Key key, @required this.text, this.top = 0, this.onTap}): super(key: key);@override_LoginButtonWidgetState createState() => _LoginButtonWidgetState();
}class _LoginButtonWidgetState extends State<LoginButtonWidget> {@overrideWidget build(BuildContext context) {return Container(margin: EdgeInsets.only(right: ScreenUtil().setWidth(60.0),left: ScreenUtil().setWidth(60.0),top: ScreenUtil().setWidth(widget.top)),child: Material(borderRadius: BorderRadius.circular(ScreenUtil().setHeight(44.0)),child: Ink(decoration: BoxDecoration(gradient: const LinearGradient(colors: [Color(0xff5eb680),Color(0xff00acb6),Color(0xff00acb6),]),borderRadius: BorderRadius.circular(ScreenUtil().setHeight(44.0)),),child: InkWell(borderRadius: BorderRadius.circular(ScreenUtil().setHeight(44.0)),onTap: widget.onTap,child: Container(alignment: Alignment.center,width: ScreenUtil.screenWidth,height: ScreenUtil().setWidth(90.0),child: Text(widget.text,style: TextStyle(color: Colors.white,fontSize: ScreenUtil().setSp(38.0),),),),),),),);}
}调用：
LoginButtonWidget(text: '登录',top: 30,onTap: () {},)

注意点

我这里使用了ScreenUtil这个屏幕适配的工具，记得一定得初始化；

ScreenUtil.instance = ScreenUtil(width: 720.0, height: 1080.0)..init(context);

创造不易，感谢支持，更多消息请关注公众号：浅滩里的鱼

flutter自定义渐变背景按钮相关推荐

Android 自定义渐变背景
先看一下效果图,这是线性渐变,可以通过type进行修改类型,根据自己的需求更改颜色. <?xml version="1.0" encoding="utf-8&quo ...
笔记：MATLAB自定义渐变背景
问题: 原图: 目标: 主要是得自己定义一个colormap, 然后用fill 或patch 进行颜色填充. 完整的代码如下: clc; clear all; color_1 = [255 110 1 ...
Flutter自定义背景色渐变按钮组件
这是笔者写的第一个 Flutter 自定义组件,在这里和大家分享一下,可能稍微有点粗糙,就当学习使用. 首先我们先来看一下效果图: 代码: import 'package:flutter/materi ...
Flutter RichText支持自定义文字背景
extended text 相关文章 Flutter RichText支持图片显示和自定义图片效果 Flutter RichText支持自定义文本溢出效果 Flutter RichText支持自定义文 ...
（六）Flutter 基础部件 TextView 和TextStyle Flutter 容器装饰盒子边框圆角阴影形状渐变背景图像
RichText:行内多样式的文字 import 'package:flutter/material.dart';class BasicDemo extends StatelessWidget {@o ...
【Flutter】Flutter 自定义字体 ( 下载 TTF 字体 | pubspec.yaml 配置字体资源 | 同步资源 | 全局应用字体 | 局部应用字体 )
文章目录一.Flutter 自定义字体 1.ttf 字体文件 2.ttf 字体资源配置 3.获取字体 4.全局使用字体 5.局部使用字体二.完整代码示例三.相关资源一.Flutter 自定义字 ...
swiper切换按钮位置改变_swiper插件自定义切换箭头按钮
不知道大家在使用swiper时有没有遇到这样一种需求,swiper插件自定义切换箭头按钮,话不多说,直接上gif. 也就是需要把左右切换的箭头移到容器的外面,自定义箭头的样式. 给swiper容器再加 ...
flex中自定义皮肤的按钮制作
今天聊一下FLEX中自定义皮肤的按钮的制作.首先这是一个按钮皮肤文件: <?xml version="1.0" encoding="utf-8"?> ...
如何自定义火狐背景_在Firefox中自定义菜单
如何自定义火狐背景 Would you like a way to edit menus and remove the extra entries that you do not use or nee ...
渐变背景（background）效果
chrom and Safari浏览器: webkit核心的浏览器,使用CSS3渐变方法(css-gradient) -webkit-gradient (type , start_point , en ...

flutter自定义渐变背景按钮

自定义渐变背景按钮

文章目录

先看效果图

关键代码：

背景渐变色

点击触发水波纹

具体代码实现：

注意点

flutter自定义渐变背景按钮相关推荐

最新文章

热门文章