Flutter控件---超簡單的模糊陰影實現

如果Android原生開發讓搞個陰影，那就把UI拉出去暴打一頓吧。當然，搞個帶陰影的背景切圖也是能勉強接受的。
用了Flutter之后發現寫帶陰影控件簡直不要太簡單，媽媽再也不用擔心我畫不出來好看的陰影了。
先上圖：

這次分享的例子是用Container的decoration屬性實現的，當然你也可以使用Material家族的MaterialButton等，但是隱形的位置不可控。如上圖第五個用的就是官方MaterialButton，陰影主要就是在下方，如果想改上下左右的陰影大小顏色等， 就沒法實現了。不廢話了，直接上代碼：
第一個圓形button：

Widget _circleButton() {
  return Container(
    margin: EdgeInsets.only(left: 20),
    decoration: BoxDecoration(shape: BoxShape.circle, boxShadow: [
      ///陰影顏色/位置/大小等
      BoxShadow(color: Colors.grey[300],offset: Offset(1, 1),
        ///模糊陰影半徑
        blurRadius: 5,
      ),
      BoxShadow(color: Colors.grey[300], offset: Offset(-1, -1), blurRadius: 5),
      BoxShadow(color: Colors.grey[300], offset: Offset(1, -1), blurRadius: 5),
      BoxShadow(color: Colors.grey[300], offset: Offset(-1, 1), blurRadius: 5)
    ]),
    child: CircleAvatar(
      radius: 20,
      backgroundColor: Colors.white,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(
            Icons.launch,
            color: Colors.black87,
            size: 20,
          ),
          Text(
            "分享",
            style: TextStyle(
              color: Colors.grey[400],
              fontSize: 10,
            ),
          )
        ],
      ),
    ),
  );
}

Widget _rectangleButton() {
  return Container(
    margin: EdgeInsets.only(top: 20, left: 20),
    decoration: BoxDecoration(shape: BoxShape.rectangle, boxShadow: [
      BoxShadow(color: Colors.grey[300],offset: Offset(1, 1),blurRadius: 5,),
      BoxShadow(color: Colors.grey[300], offset: Offset(-1, -1), blurRadius: 5),
      BoxShadow(color: Colors.grey[300], offset: Offset(1, -1), blurRadius: 5),
      BoxShadow(color: Colors.grey[300], offset: Offset(-1, 1), blurRadius: 5)
    ]),
    child: FlatButton(
        onPressed: () {},
        color: Colors.white,
        padding: EdgeInsets.only(left: 30, right: 30, top: 10, bottom: 10),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(
              Icons.launch,
              color: Colors.black87,
              size: 20,
            ),
            Text(
              "分享",
              style: TextStyle(
                color: Colors.grey[400],
                fontSize: 10,
              ),
            )
          ],
        )),
  );
}

Widget _flatButton1() {
  return Container(
    margin: EdgeInsets.only(top: 20, left: 20),
    decoration: BoxDecoration(shape: BoxShape.rectangle, boxShadow: [
      //BoxShadow中Offset (1,1)右下，(-1,-1)左上,(1,-1)右上,(-1,1)左下
      BoxShadow(
        color: Colors.red,
        offset: Offset(1, 1),
        blurRadius: 5,
      ),
      BoxShadow(
          color: Colors.blueAccent, offset: Offset(-1, -1), blurRadius: 5),
    ]),
    child: FlatButton(
        onPressed: () {},
        color: Colors.white,
        padding: EdgeInsets.only(left: 30, right: 30, top: 10, bottom: 10),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(
              Icons.launch,
              color: Colors.black87,
              size: 20,
            ),
            Text(
              "分享",
              style: TextStyle(
                color: Colors.grey[400],
                fontSize: 10,
              ),
            )
          ],
        )),
  );
}

Widget _flatButton2() {
  return Container(
    margin: EdgeInsets.only(top: 20, left: 20),
    decoration: BoxDecoration(shape: BoxShape.rectangle, boxShadow: [
      //BoxShadow中Offset (1,1)右下，(-1,-1)左上,(1,-1)右上,(-1,1)左下
      BoxShadow(
        color: Colors.red,
        offset: Offset(-1, 1),
        blurRadius: 5,
      ),
      BoxShadow(color: Colors.blueAccent, offset: Offset(1, -1), blurRadius: 5),
    ]),
    child: FlatButton(
        onPressed: () {},
        color: Colors.white,
        padding: EdgeInsets.only(left: 30, right: 30, top: 10, bottom: 10),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(
              Icons.launch,
              color: Colors.black87,
              size: 20,
            ),
            Text(
              "分享",
              style: TextStyle(
                color: Colors.grey[400],
                fontSize: 10,
              ),
            )
          ],
        )),
  );
}

Widget _materialButton() {
  return Padding(
    padding: EdgeInsets.only(top: 20, left: 20),
    child: MaterialButton(
      padding: EdgeInsets.only(left: 30, right: 30, top: 10, bottom: 10),
      color: Colors.white,
      onPressed: () {},
      elevation: 5,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(
            Icons.launch,
            color: Colors.black87,
            size: 20,
          ),
          Text(
            "分享",
            style: TextStyle(
              color: Colors.grey[400],
              fontSize: 10,
            ),
          )
        ],
      ),
    ),
  );
}

decoration的boxShadow就是一系列的陰影組件，根據坐標位置和大小，顏色以及陰影模糊半徑，想怎么實現就怎么實現，陰影實現就是這么簡單。