How to change the box shadow height, width and opacity in flutter?

Question

The Button in this first image has a blurred shadow with a less width than the button.

But when I am trying to apply the design in my flutter app it looks different and also I am not able to set the width, height and opacity of ab box shadow. How can I do it?

app.dart

MaterialButton(
                          onPressed: () {},
                          textColor: Colors.white,
                          padding: const EdgeInsets.all(0.0),
                          child: Container(
                            padding: const EdgeInsets.symmetric(
                                vertical: 4.0, horizontal: 16.0),
                            decoration: BoxDecoration(
                                color: Color(0XFF00D99E),
                                borderRadius: BorderRadius.circular(16.0),
                                boxShadow: [
                                  Opacity(opacity: null),
                                  BoxShadow(
                                    color: Color(0XFF000000),
                                    offset: Offset(0.0, 8.0),
                                    blurRadius: 16.0,
                                  )
                                ]),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              children: <Widget>[
                                Padding(
                                  padding: EdgeInsets.all(4.0),
                                  child: Image.asset(
                                    'assets/icon-chat-notification.png',
                                    color: Colors.white,
                                  ),
                                ),
                                Padding(
                                  padding: EdgeInsets.all(4.0),
                                  child: Text('CART'),
                                )
                              ],
                            ),
                          ),
                        )

score 16 · Accepted Answer · answered Jun 12 '19 at 02:07

You could do something like this, trick is to use negative spreadRadius, and compensate blur/opacity of the color:

Container(
            width: 88,
            height: 30,
            decoration: BoxDecoration(
                color: Color(0xff00D99E),
                borderRadius: BorderRadius.circular(15),
                boxShadow: [
                  BoxShadow(
                      blurRadius: 8,
                      offset: Offset(0, 15),
                      color: Color(0xff00D99E).withOpacity(.6),
                      spreadRadius: -9)
                ]),

/// the relevant code is the BoxShadow()

            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Icon(
                  Icons.shopping_cart,
                  size: 12,
                ),
                SizedBox(width: 6),
                Text("CART",
                    style: TextStyle(
                      fontSize: 10,
                      color: Colors.white,
                      letterSpacing: 1,
                    ))
              ],
            ),
          ),

This is the result:

How to change the box shadow height, width and opacity in flutter?

1 Answers1