Flutter-UI- 阴影（BoxShadow）、 间距（padding）、 Align

• 关于阴影（BoxShadow）

 

代码：

    /*
    *  控件阴影demo
    * */
    Container BoxDecorationDemo() {
      return Container(
//        color: Colors.red,
      width: 200,
      height: 200,
      alignment: Alignment(0,0), //居中参数
      padding: EdgeInsets.all(20), // 子控件与 Container 内间距
      margin: EdgeInsets.all(10),// 四周间距10
      child: Icon(Icons.pages,size: 60,color: Colors.greenAccent,),
//        transform: Matrix4.rotationZ(50),
      decoration: BoxDecoration(
        color: Colors.red,
            border: Border.all(
              width: 8,
              color: Colors.greenAccent
            ),
        borderRadius: BorderRadius.circular(50), // 圆角
        boxShadow: [
          BoxShadow(color: Colors.grey,offset: Offset(10,10),spreadRadius: 5,blurRadius:20), //阴影   spreadRadius 延展   blurRadius 模糊
          BoxShadow(color: Colors.orange,offset: Offset(-10,10),spreadRadius: 5,blurRadius: 20)

        ]
      ),
      );
    }

•  
•   关于 padding：

 

 

    Column PaddingDemo() {
      return Column(
      children: <Widget>[
        Padding(
          padding: EdgeInsets.only(
            bottom: 20
          ),
          child: Text("hello  LMX",style: TextStyle(fontSize: 30,backgroundColor: Colors.red),),

        ),
        Text("hello  LMX",style: TextStyle(fontSize: 30,backgroundColor: Colors.red),),
        Text("hello  LMX",style: TextStyle(fontSize: 30,backgroundColor: Colors.red),),

      ],
    );
    }

 

• 关于Align：

 

    /*
    * Align 练习
    * */
    Container AlignDemo() {
      return Container(
      width: 200,
      height: 200,
      color: Colors.greenAccent,
      child: Align(
          alignment: Alignment(0,0),
          widthFactor: 15,
          heightFactor: 15,
          child: Icon(Icons.pets,size: 70,),
      ),

    );
    }