How can I add shadow to the widget in flutter?

前端 未结 8 1516
余生分开走
余生分开走 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条回答
  •  庸人自扰
    2020-12-04 09:32

    The given answers do the trick for outer shadow i.e. around the widget. I wanted a shadow on the widget which is inside the boundaries and according to the github issue there is no inset attribute in ShadowBox yet. My workaround was to add a layer of widget with a gradient using the stack widget so that it looks like the widget itself has the shadows. You must use the mediaQuery for dimensions otherwise the layout will be messed up on different devices. Here's a sample of code for better understanding:

    Stack(
                children: [
                  Container(
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        fit: BoxFit.cover,
                        image: AssetImage("assets/sampleFaces/makeup.jpeg"),
                        // fit: BoxFit.cover,
                      ),
                    ),
                    height: 350.0,
                  ),
                  Container(
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        begin: FractionalOffset.topCenter,
                        end: FractionalOffset.bottomCenter,
                        colors: [
                          Colors.black.withOpacity(0.0),
                          Colors.black54,
                        ],
                        stops: [0.95, 5.0],
                      ),
                    ),
                  )
                ],
              ),
    

提交回复
热议问题