Flutter Widget - 如何美化自己的控件

方式1：使用 decoration: new BoxDecoration()

1. 属性：

shape // 形状 取值：BoxShape.circle  BoxShape.rectangle(默认)
color // 颜色
boxShadow // 阴影 取值：<BoxShadow>[]
gradient // 渐变色 取值：new LinearGradient(colors: <Color>[])  new RadialGradient(colors: <Color>[])
image // 背景图片  取值：new DecorationImage(image: new AssetImage( 'images/pic1.jpg',),)

2. demo

Widget renderBody(BuildContext context) {
  return new Center(
    child: new Container(
      width: 60.0,
      height: 60.0,
      decoration: new BoxDecoration(
        shape: BoxShape.circle,
        image: new DecorationImage(
          image: new AssetImage(
            'images/pic1.jpg',
          ),
          fit: BoxFit.cover,
        ),
        gradient: new LinearGradient(colors: <Color>[
          Colors.deepOrange,
          Colors.orange,
        ]),
        color: Theme.of(context).buttonColor,
        // borderRadius: new BorderRadius.circular(8.0),
        boxShadow: <BoxShadow>[
          new BoxShadow(
            color: const Color(0xffff639b),
            blurRadius: 1.0,
            spreadRadius: 1.0,
            offset: Offset(-1.0, 1.0),
          ),
        ],
      ),
      child: new Center(
        child: new Text(
          'Custom \nButton',
          style: new TextStyle(
            color: Colors.white,
          ),
        ),
      ),
    ),
  );
}

1. 其中 image、gradient、color三个属性同时设置，最后表现出来的是 image；如果只设置后两者，则表现出来的是gradient；而color属性只有在前两种属性不设置的情况下才会表现出来。
2. 当 shape: BoxShape.circle,时，borderRadius属性是不能设置，两者冲突。

方式2：使用 Android 中波纹效果 InkWell ，据说这个效果跟扁平按钮更配哦~

Widget renderBody(BuildContext context) {
  return new InkWell(
    onDoubleTap: null,
    onLongPress: null,
    onTap: () {
      print('tap');
    },
    highlightColor: Color(0xffff639b), // 高亮色
    splashColor: Color(0xff00a0e9), // 波纹颜色
    child: new Container(
      padding: new EdgeInsets.all(12.0),
      child: new Text('Flat Button'),
    ),
  );
}

方式3：方冉还可以使用官方已经定义好的按钮 FlatButton、RaisedButton 等

Widget renderBody(BuildContext context) {
  return new Column(
    children: <Widget>[
      new FlatButton( // 扁平化按钮
        onPressed: () {
          print('Click FlatButton');
        },
        color: Colors.orange,
        child: new Text('FlatButton'),
        splashColor: Colors.blue, // 波纹颜色
      ),
      new RaisedButton( // 具有阴影效果的按钮
        onPressed: () {
          print('Click RaisedButton');
        },
        color: Color(0xffff639b),
        splashColor: Colors.blue, // 波纹颜色
        child: new Text('RaisedButton'),
      ),
      new CloseButton(), // 关闭按钮
      new BackButton(), // 返回按钮
      new FloatingActionButton( // 悬浮按钮
        onPressed: () {
          print('FloatingActionButton');
        },
      ),
      new IconButton( // 图片按钮
          icon: Icon(Icons.ac_unit),
          onPressed: () {
            print('IconButton');
          }),
      new RawMaterialButton(
        onPressed: () {
          print('RawMaterialButton');
        },
        padding: EdgeInsets.all(7.0),
        child: new Text('RawMaterialButton'),
      ),
    ],
  );
}