Flutter how to use boxShadow on arbitrary child?

Question

I have already seen this question and there is a strange behaviour going on.

/// Case 1
Container(
  height: containerSize,
  width: containerSize,
  decoration: shadowBoxDecoration.copyWith(
    color: mainColor,
  ),
),

/// Case 2
Container(
  decoration: shadowBoxDecoration,
  child: Container(
    width: containerSize,
    height: containerSize,
    decoration: BoxDecoration(
      color: mainColor,
      borderRadius: borderRadius,
    ),
  ),
),

/// Case 3
Container(
  decoration: shadowBoxDecoration,
  child: FlatButton(
    textColor: mainColor,
    onPressed: () => {},
    shape: RoundedRectangleBorder(
      side: BorderSide(
        color: mainColor,
      ),
      borderRadius: borderRadius,
    ),
    child: Text('Test Text'),
  ),
),

I am testing 3 cases where I apply the shadow differently in each case:

• Case 1 has the color built into the shadow styling.

• Case 2 is a general approach using any widget and visually the same as Case 1

• Case 3 is Case 2 with a FlatButton as child .

This is what I am seeing

So as you can see, FlatButton seems to have a bigger shadow than it is necessary and I do not understand how I could make it work.

There must be probably some padding on top and the button of the FlatButton, but I cannot debug that, since widget inspector only shows FlatButton (some padding is just visually there).

Full code:

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return WidgetsApp(
        color: Colors.redAccent,
        builder: (context, child) {
          final boxShadow = [
            BoxShadow(
              color: Colors.grey.withOpacity(0.5),
              spreadRadius: 1,
              blurRadius: 1,
              offset: Offset(0, 3),
            ),
          ];

          final containerSize = 100.0;

          final borderRadius = BorderRadius.circular(10);

          final separator = Container(
            height: 50,
          );

          final mainColor = Colors.redAccent;

          final shadowBoxDecoration = BoxDecoration(
            borderRadius: borderRadius,
            boxShadow: boxShadow,
          );

          return Stack(
            children: [
              SizedBox.expand(
                child: Container(
                  color: Colors.white,
                ),
              ),
              SizedBox.expand(
                  child: Center(
                child: Column(
                  children: <Widget>[
                    // Spacing
                    separator,

                    /// Case 1
                    Container(
                      height: containerSize,
                      width: containerSize,
                      decoration: shadowBoxDecoration.copyWith(
                        color: mainColor,
                      ),
                    ),
                    // Spacing
                    separator,

                    /// Case 2
                    Container(
                      decoration: shadowBoxDecoration,
                      child: Container(
                        width: containerSize,
                        height: containerSize,
                        decoration: BoxDecoration(
                          color: mainColor,
                          borderRadius: borderRadius,
                        ),
                      ),
                    ),
                    separator,

                    /// Case 3
                    Container(
                      decoration: shadowBoxDecoration,
                      child: FlatButton(
                        textColor: mainColor,
                        onPressed: () => {},
                        shape: RoundedRectangleBorder(
                          side: BorderSide(
                            color: mainColor,
                          ),
                          borderRadius: borderRadius,
                        ),
                        child: Text('Test Text'),
                      ),
                    ),
                  ],
                ),
              )),
            ],
          );
        });
  }
}

---

At a low level, I want to have a button that has shadow applied (and also understand what is so special about FlatButton).

At a higher level, I want to have a Widget that can apply my general shadow rules to an arbitrary child (which I do not understand why it does not exist). Something like that:

class SimpleShadow extends StatelessWidget {
  final Widget child;

  const SimpleShadow({
    @required this.child,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(boxShadow: [
        BoxShadow(
          offset: Offset(0, 3),
          color: Colors.black.withOpacity(0.12),
          blurRadius: 0,
          spreadRadius: 0,
        ),
      ]),
      child: child,
    );
  }
}

Answer 1

When add a border to 'FlatButton', it seems that 'FlatButton' making border inside container. So how about you border to outside container of FlatButton?

/// Case 3
                    Container(
                      decoration: BoxDecoration(
                        borderRadius: borderRadius,
                        boxShadow: boxShadow,
                        border: Border.all(
                          color: mainColor,
                          width: 2.0,
                          style: BorderStyle.solid,
                        ),
                      ),
                      child: FlatButton(
                        textColor: mainColor,
                        onPressed: () => {},
                        // shape: RoundedRectangleBorder(
                        //   side: BorderSide(
                        //     color: mainColor,
                        //   ),
                        //   borderRadius: borderRadius,
                        // ),
                        child: Text('Test Text'),
                      ),
                    ),