Flutter中常用的按钮效果

最新推荐文章于 2024-08-12 08:38:38 发布

Mr_Tony

最新推荐文章于 2024-08-12 08:38:38 发布

阅读量1.4k

点赞数

分类专栏： flutter

本文链接：https://blog.csdn.net/Mr_Tony/article/details/112861048

版权

flutter 专栏收录该内容

62 篇文章 6 订阅

订阅专栏

本文整理一些实际开发中常用但是写法比较复杂的按钮效果

文章目录

- 一、渐变色的按钮效果
- 二、带边框的按钮

一、渐变色的按钮效果

效果如下：
在这里插入图片描述

代码如下：

       Container(
                margin: const EdgeInsets.symmetric(horizontal: 10,vertical: 10),
                width: 90,
                height: 37,
                decoration: new BoxDecoration(
                  gradient: new LinearGradient(
                    colors: [ColorStore.c_fff7ca92,ColorStore.c_fff39825],
                    begin: FractionalOffset.centerLeft,
                    end: FractionalOffset.centerRight,
                  ),
                  borderRadius: BorderRadius.circular(3),
                ),
                child: FlatButton(
                  child: Text('返回',
                    style:TextStyle(
                        color: Colors.white,
                        fontSize: 16
                    ),
                  ),
                  onPressed: () {
                  },
                ),
              ),

二、带边框的按钮

效果如下：
在这里插入图片描述

代码如下：

OutlineButton(
  onPressed:(){

  },
  child: Text("交易记录"),
  highlightColor: Colors.transparent,//
  hoverColor: Colors.transparent,//触摸时候的颜色
  highlightedBorderColor: Colors.red,//高亮时候的边框颜色
  borderSide: BorderSide(color: Colors.blue),//修改边框样式
),

参考链接：

https://blog.csdn.net/yuzhiqiang_1993/article/details/85004313