title: Buttons' shaders are cutted off using a flutter plug-in
body: <p><strong>I created some buttons for my flutter app menu and then I tried to give them some clicky animations.
  I found a plug-in that was meant for me, so I edited the code from it but I got some problems.</strong></p>
  <p><em>As you can see from the images below, the buttons' shadows are cutted off, and I don't know how to fix them.
  (I just need to know how to solve this little issue)</em></p>
  <p>That’s the plug-in I edited:</p>
  <pre><code>import 'package:flutter/material.dart';
  
  class AnimatedButton extends StatefulWidget {
  
    final GestureTapCallback onPressed;
    final Widget child;
    final bool enabled;
    final double padding;
    final bool isCircular;
    final Color color;
    final Color shadowColor;
    final double height;
    final double width;
    final ShadowDegree shadowDegree;
    final int duration;
  
    const AnimatedButton({
      Key key,
      @required this.onPressed,
      @required this.child,
      @required this.isCircular,
      this.padding = 0.0,
      this.enabled = true,
      this.color = Colors.blue,
      this.shadowColor = Colors.blueAccent,
      this.height = 64,
      this.shadowDegree = ShadowDegree.light,
      this.width = 200,
      this.duration = 70,
    })  : assert(child != null),
          super(key: key);
  
    @override
    _AnimatedButtonState createState() =&gt; _AnimatedButtonState();
  }
  
  class _AnimatedButtonState extends State&lt;AnimatedButton&gt; {
  
    static const Curve _curve = Curves.easeIn;
    static const double _shadowHeight = 4;
    double _position = 4;
  
    @override
    Widget build(BuildContext context) {
      final double _height = widget.height - _shadowHeight;
      return GestureDetector(
        // width here is required for centering the button in parent
          child: Container(
              width: widget.width,
              height: _height + _shadowHeight,
              child: Stack(
                  children: &lt;Widget&gt;[
  
                    // Shadow
                    Positioned(
                      bottom: -8,
                      child: Container(
                        height: _height,
                        width: widget.width,
                        decoration: BoxDecoration(
                          color: widget.enabled
                              ? widget.shadowColor
                              : darken(Colors.grey, widget.shadowDegree),
                          borderRadius: BorderRadius.all(
                            widget.isCircular ? Radius.circular(37) : Radius.circular(30)
                          )
                        )
                      )
                    ),
  
                    // Button
                    AnimatedPositioned(
                        curve: _curve,
                        duration: Duration(milliseconds: widget.duration),
                        bottom: _position,
                        child: Container(
                            height: _height,
                            width: widget.width,
                            decoration: BoxDecoration(
                                color: widget.enabled ? widget.color : Colors.grey,
                                borderRadius: BorderRadius.all(
                                    widget.isCircular ? Radius.circular(37) : Radius.circular(27)
                                )
                            ),
                            child: Padding(
                              padding: EdgeInsets.only(top: widget.padding),
                              child: Center(
                                  child: widget.child
                              ),
                            )
                        )
                    )
  
                  ]
              )
          ),
          onTapDown: widget.enabled ? _pressed : null,
          onTapUp: widget.enabled ? _unPressedOnTapUp : null,
          onTapCancel: widget.enabled ? _unPressed : null
      );
    }
  
    void _pressed(_) {
      setState(() {
        _position = -4;
      });
    }
  
    void _unPressedOnTapUp(_) =&gt; _unPressed();
  
    // top
    void _unPressed() {
      setState(() {
        _position = 4;
      });
      widget.onPressed();
    }
  }
  
  Color darken(Color color, ShadowDegree degree) {
    double amount = degree == ShadowDegree.dark ? 0.5 : 0.12;
    final hsl = HSLColor.fromColor(color);
    final hslDark = hsl.withLightness((hsl.lightness + amount).clamp(0.0, 1.0));
  
    return hslDark.toColor();
  }
  
  enum ShadowDegree { light, dark }
  </code></pre>
  <p>And that is how a button is made:</p>
  <pre><code>AnimatedButton(
              color: Color(0xff4388fc),
              child: Text(
                &quot;LOCAL&quot;,
                style: TextStyles().textStyleMenuButtonText()
              ),
              height: 80,
              width: 250,
              shadowColor: Color(0xff2963d4),
              isCircular: false,
              padding: 6.0,
              onPressed: () {
                ModeSelectorDialog().getDialog(
                    context,
                    MediaQuery.of(context).size.height,
                    MediaQuery.of(context).size.width
                );
              }
            ),
  </code></pre>
  <p><em>images</em></p>
  <p><a href="https://i.stack.imgur.com/9Z0rQ.png" rel="nofollow noreferrer">I got 5 buttons, but their shadows are cutted off, and I don't know why</a></p>
  <p><a href="https://i.stack.imgur.com/WsLku.png" rel="nofollow noreferrer">That's how I want them to be</a></p>