How can I add shadow to the widget in flutter?

前端 未结 8 1512
余生分开走
余生分开走 2020-12-04 09:07

How can I add shadow to the widget like in the picture below?

This is my current widget code.

8条回答
  •  -上瘾入骨i
    2020-12-04 09:33

    Check out BoxShadow and BoxDecoration

    A Container can take a BoxDecoration (going off of the code you had originally posted) which takes a boxShadow

    return Container(
      margin: EdgeInsets.only(left: 30, top: 100, right: 30, bottom: 50),
      height: double.infinity,
      width: double.infinity,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10),
            topRight: Radius.circular(10),
            bottomLeft: Radius.circular(10),
            bottomRight: Radius.circular(10)
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(0, 3), // changes position of shadow
          ),
        ],
      ),
    )
    

    Screenshot

提交回复
热议问题