Flutter 容器Container的常规使用

实现效果：

代码中有注释，看注释
1.Container实现背景图片，圆角，内容居中，角度旋转，边框设置，margin,padding,宽度挤满父容器

new Container(
          decoration: new BoxDecoration(
            //color: Colors.purple,//背景色
            //背景设置
            border: Border.all(color: Colors.blue, width: 5),
            //圆角角度
            borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
            //背景图片
            image: new DecorationImage(
              image: new NetworkImage(
                  'http://a2.att.hudong.com/36/48/19300001357258133412489354717.jpg'),
              centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
            ),
          ),
          width: double.maxFinite,//宽度挤满符容器
          height: 150,//高度，不设置默认为子装置高度
          margin: EdgeInsets.all(20),//margin
          padding: EdgeInsets.all(30),//padding
          //子widget排列方式
          alignment: Alignment.center,
          child: Text(
            '粉色按钮',
            style: TextStyle(
                fontSize: 35,
                color: Colors.white,
                backgroundColor: Colors.black),
          ),
        ),

2.Container实现圆角按钮
添加事件监听【常规情况是监听容器中的某一个wiget的点击事件】

onClick(String label) {
    print("点击:" + label);
    setState(() {
      title = label + '点击后';
    });
  }
  ...
  new Container(
          width: double.maxFinite,
          decoration: BoxDecoration(
              color: Colors.purple,
              borderRadius: BorderRadius.all(Radius.circular(50))),
          margin: EdgeInsets.all(20),
          padding: EdgeInsets.all(30),
          alignment: Alignment.center,
          //手势检测器——添加事件监听
          child: new GestureDetector(
            //可以这样实现
//            onTap: () {
//              onFthClick("紫色按钮");
//            },
            onTap: () => onClick("紫色按钮"),
            child: new Text(
              title,
              style: TextStyle(fontSize: 20, color: Colors.white),
            ),
          ),
        ),