FlutterUI-自定义Button

Flutter版本-v1.0.0
按钮控件常用api

基础用法参考：https://book.flutterchina.club/chapter3/buttons.html

常用普通圆角按钮

常用按钮的写法，很简单也很美观。

        new RaisedButton(
          child: new Text("登录"),
          color: Colors.blue,
          textColor: Colors.white,
          onPressed: () {
            _login();
          },
          disabledColor: Colors.grey,
          disabledTextColor: Colors.white,
          disabledElevation: 4,
//          onPressed: null,// 设置为null即为不可点击（disabled）状态
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)), //圆角大小
        ),

效果：

普通圆角按钮

但是UI稿往往会出现各种按钮，所以又会踩坑

图片+文字按钮

用InkWell + Stack来形成层级

        new InkWell(
          child: new Stack(
            alignment: Alignment.center,
            children: <Widget>[
              new Image.asset("images/ic_launcher_round.png"),
              new Text("登录",
              style: new TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
                color: Colors.red
              ),),
            ],
          ),
          onTap: () { },
        ),

效果：

图片+文字按钮

渐变色+圆角+文字按钮

这个看似也容易，但由于RawMaterialButton有最小宽高，如果child宽高较小，会出现多余的灰色背景，例如：

child宽高较小

用了InkWell + Container的方案，结果也不理想，因为没有点击的阴影效果，波纹作用于背景也不明显。

查阅了很多，最终找到了buttonTheme这个属性，可以在MaterialApp的theme里设置即可作用全局，使全局的button都没有最小宽高。

void main() {
//  debugPaintSizeEnabled=true;
  runApp(new MaterialApp(
      theme: new ThemeData(
          primaryColor: AppColors.colorPrimary,
          accentColor: Colors.blue,
          buttonTheme: new ButtonThemeData(
            minWidth: 0,
            height: 0,
            padding: EdgeInsets.all(0),
            buttonColor: Colors.transparent
          )),
      home: new WanAndroidApp()));
}

然后再运用RaisedButton + Container即可达到渐变色+圆角+文字按钮的效果，同理其他特殊的按钮均可按此实现。

        new RaisedButton(
          child: new Container(
            decoration: BoxDecoration(
              border: Border.all(color: Colors.red, width: 1.0),
              borderRadius: BorderRadius.circular(8.0),
              gradient: LinearGradient(colors: <Color>[
                Colors.orange,
                Colors.blue,
              ]),
            ),
            child: new Text("登录"),
            padding: EdgeInsets.fromLTRB(16, 8, 16, 8),
            alignment: Alignment.center,
          ),
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8.0)), //圆角大小,与BoxDecoration保持一致，更美观
          onPressed: () {},
          textColor: Colors.white,
        ),

效果：

渐变色+圆角+文字按钮

至此，大部分的Button样式应该都可以实现了～

FlutterUI-自定义Button

常用普通圆角按钮

图片+文字按钮

渐变色+圆角+文字 按钮

推荐阅读更多精彩内容

渐变色+圆角+文字按钮