Flutter unwanted padding while using DecoratedBox with TextButton for gradient

user_19253675 0
Viewed 41

Here is my Button Widget

    class StyledButton extends StatelessWidget {
  const StyledButton(
      {Key? key,
      required this.text,
      required this.width,
      required this.height,
      required this.onclick})
      : super(key: key);

  final VoidCallback onclick;
  final String text;
  final double height;
  final double width;

  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(50),
            gradient: const LinearGradient(
                colors: [Color(0xff9d6aa7), Color(0xff8D92C3)])),
        child: TextButton(
            style: ButtonStyle(
                shape: MaterialStateProperty.all(RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(50),
                    side: const BorderSide(color: Colors.transparent)))),
            onPressed: () {
              onclick();
            },
            child: SizedBox(
                width: width,
                height: height,
                child: Center(
                  child: Text(
                    text,
                    style: const TextStyle(
                        fontSize: 13,
                        color: Colors.white,
                        fontFamily: "MontserratSemiBold"),
                  ),
                ))));
  }
}

And this is how it is being used on a screen

child: StyledButton(text: "Get Started", width: 213, height: 26,onclick: (){}))

result is

Button

Now the problem is when I tap on it this happens Button Taped

Why I am seeing extra DecoratedBox around button? How can I remove it?

flutter-layout flutter gradient
1 Answers

That extra thing you see is for button's overlayColor, you can change it this way:

style: ButtonStyle(
              overlayColor: MaterialStateProperty.all(Colors.transparent),
              shape: MaterialStateProperty.all(
                RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(50),
                  side: const BorderSide(color: Colors.transparent),
                ),
              ),
            ),

if you do not want to change color you can do this:

StyledButton(text: "Get Started", onclick: () {})

and change button widget to this:

 class StyledButton extends StatelessWidget {
  const StyledButton(
      {Key? key,
      required this.text,
      required this.onclick})
      : super(key: key);

  final VoidCallback onclick;
  final String text;

  @override
  Widget build(BuildContext context) {
    return Container(
        width: 213,
        height: 50,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(50),
            gradient: const LinearGradient(
                colors: [Color(0xff9d6aa7), Color(0xff8D92C3)])),
        child: TextButton(
            style: ButtonStyle(
                shape: MaterialStateProperty.all(RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(50),
                    side: const BorderSide(color: Colors.transparent)))),
            onPressed: () {
              onclick();
            },
            child: child: Text(
                    text,
                    style: const TextStyle(
                        fontSize: 13,
                        color: Colors.white,
                        fontFamily: "MontserratSemiBold"),
                    )));
  }
}
user_103069970
Related