How to create a button with rounded corner, and gradient background?

Question

I have been trying to create a raised button with a rounded corner, and gradient background but to no success. I can only implement one or the other. It's been 2 hours and I haven't found a solution myself, on how I can implement both a rounded corner, and a gradient background together.

Below are my codes of my latest attempt to implement a raised button with rounded corner, and gradient background.

Custom class of GradientButton

class RaisedGradientButton extends StatelessWidget {
  final Widget child;
  final Gradient gradient;
  final double width;
  final double height;
  final Function onPressed;

  const RaisedGradientButton({
    Key key,
    @required this.child,
    this.gradient,
    this.width = double.infinity,
    this.height = 50.0,
    this.onPressed,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: width,
      height: 50.0,
      decoration: BoxDecoration(
        gradient: new LinearGradient(
          colors: [
            Colors.blue,
            Colors.red,
          ],
          begin: FractionalOffset.centerLeft,
          end: FractionalOffset.centerRight,
        ),
      ),
      child: Material(
        shape: new RoundedRectangleBorder(
            borderRadius: new BorderRadius.circular(128.0)),
//        color: Colors.transparent,
        child: InkWell(
            onTap: onPressed,
            child: Center(
              child: child,
            )),
      ),
    );
  }
}

How I use the above code:

RaisedGradientButton(
    onPressed: navigateToNextPage,
        child: Text("Select Community"),
)

How it looks like:

As you can see, the gradient is there, but when I attempt to create a rounded corner, it overlaps, and the gradient is behind.

Answer 1

There is a simple solution. Add the same border radius to both the button and the container inside the button. Here is a simple example.

RaisedButton(
   onPressed: () {},
   textColor: Colors.white,
   color: Colors.transparent,
   padding: EdgeInsets.all(0),
   shape: RoundedRectangleBorder(
      borderRadius: new BorderRadius.circular(18.0),
   ),
   child: Container(
      decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(18),
         gradient: LinearGradient(
            colors: <Color>[
               Colors.black38,
               Colors.black26,
               Colors.white38,
            ],
         ),
      ),
      padding: const EdgeInsets.fromLTRB(24, 12, 24, 12),
      child: const Text('Sign In', style: TextStyle(fontSize: 20)),
   ),
),