Buttons' shaders are cutted off using a flutter plug-in - flutter

Question

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.
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)
That’s the plug-in I edited:
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() => _AnimatedButtonState();
}
class _AnimatedButtonState extends State<AnimatedButton> {
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: <Widget>[
// 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(_) => _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 }
And that is how a button is made:
AnimatedButton(
color: Color(0xff4388fc),
child: Text(
"LOCAL",
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
);
}
),
images
I got 5 buttons, but their shadows are cutted off, and I don't know why
That's how I want them to be

Answer 1

Overwrite the default constructor of a Stack by setting the overflow
overflow: Overflow.visible
Your build method of the animated button should look like this:
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(overflow: Overflow.visible, children: <Widget>[
// 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);
}