title: How to create RaisedButton with rounded corner, and gradient background?
body: <p>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.</p>
  
  <p>Below are my codes of my latest attempt to implement a raised button with rounded corner, and gradient background.</p>
  
  <p>Custom class of GradientButton</p>
  
  <pre><code>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,
              )),
        ),
      );
    }
  }
  </code></pre>
  
  <p>How I use the above code:</p>
  
  <pre><code>RaisedGradientButton(
      onPressed: navigateToNextPage,
          child: Text("Select Community"),
  )
  </code></pre>
  
  <p>How it looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/UcBVg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UcBVg.png" alt="enter image description here"></a></p>
  
  <p>As you can see, the gradient is there, but when I attempt to create a rounded corner, it overlaps, and the gradient is behind.</p>