技術標籤：flutter

本文整理一些實際開發中常用但是寫法比較複雜的按鈕效果

本文整理一些實際開發中常用但是寫法比較複雜的按鈕效果

文章目錄

• • 一、漸變色的按鈕效果
  • 二、帶邊框的按鈕

一、漸變色的按鈕效果

效果如下：

程式碼如下：

       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