Flutter Button 图文分析、效果浏览

题记：不到最后时刻，千万别轻言放弃，无论结局成功与否，只要你拼博过，尽力过，一切问心无愧

---

本文章首发于微信公众号（biglead） 我的大前端生涯 ，同步刊登各技术论坛。

【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过

【x2】各种系列的视频教程 免费开源 关注 你不会迷路

【x3】系列文章 百万 Demo 随时 复制粘贴 使用

---

1 Flutter 提供的Button比较多

  Widget buildRaisedButton(){
    //它默认带有阴影和灰色背景。按下后，阴影会变大
    return RaisedButton(
      child: Text("RaisedButto"),
      onPressed: () => {},
    );
  }

---

  Widget buildFlatButton(){
    //FlatButton即扁平按钮，默认背景透明并不带阴影。按下后，会有背景色：
    return FlatButton(
      child: Text("登录"),
      onPressed: () => {},
    );
  }

---

  Widget buildOutlineButton(){
    //OutlineButton默认有一个边框，不带阴影且背景透明。按下后，边框颜色会变亮、同时出现背景和阴影(较弱)：
    return OutlineButton(
      child: Text("登录"),
      onPressed: () => {},
    );
  }

---

  Widget buildIconButton(){
    return IconButton(
      icon: Icon(Icons.thumb_up),
      onPressed: () => {},
    );
  }

2 为FlatButton设置一个圆角背景

  Widget buildCustomButton(){
    return FlatButton(
      //按钮文字颜色
      textColor: Colors.white,
      //按钮禁用时的背景颜色
      disabledColor:Colors.grey,
      //按钮禁用时的文字颜色
      disabledTextColor: Colors.grey,
      //正常状态下的背景颜色
      color: Colors.blue,
      //按钮按下时的背景颜色
      highlightColor: Colors.blue[700],
      //按钮主题，默认是浅色主题
      colorBrightness: Brightness.dark,
      //外形
      splashColor: Colors.grey,
      // button 显示的文字
      child: Text("Submit"),
      //圆角边框
      shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
      //按钮点击回调
      onPressed: () => {},
    );
  }

---

【1】 目前在西瓜视频上免费刊登 Flutter 系列教程，每日更新，欢迎关注接收提醒点击查看提示

---

【2】 本公众号会首发系列专题文章，付费的视频课程会在公众号中免费刊登，在你上下班的路上或者是睡觉前的一刻，本公众号都是你浏览知识干货的一个小选择，收藏不如行动，在那一刻，公众号会提示你该学习了。