flutter 設置陰影

1、主要是 boxShadow 這個屬性

Container(
  width: 50,
  height: 50,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(28)),
    boxShadow: [
      BoxShadow(
          color: Colors.red,  //底色,陰影顏色
          offset: Offset(0, 0), //陰影位置,從什麼位置開始
          blurRadius: 1,  // 陰影模糊層度
          spreadRadius: 0,  //陰影模糊大小
    ],
  ),
  child: Container(),
),

2、效果，邊緣有陰影

 

3、擴展

boxShadow 是一個數組，可以設置多個，效果更炫酷

Container(
  width: 20,
  height: 20,
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: BorderRadius.all(Radius.circular(20)),
    boxShadow: [
      BoxShadow(color: Colors.green,offset: Offset(0, 0),blurRadius: 1,spreadRadius: 5),
      BoxShadow(color: Colors.yellowAccent,offset: Offset(0, 0),blurRadius: 1,spreadRadius: 4),
      BoxShadow(color: Colors.blue,offset: Offset(0, 0),blurRadius: 1,spreadRadius: 3),
    ],
  ),
  child: Container(),
);

效果