Creating a Flutter Custom Gradient Button

In this article, I will explain how to create a Custom Gradient Button with Flutter widgets. If you are a beginner wondering how to add a GradientButton to your UI, well this article is for you.

You can learn about available Material design buttons with this article.

Flutter UI Essentials- Buttons

I use the LinearGradient widget to create the gradient button.

Properties of a LinearGradient

The list of colors is the only required argument here. As you can see, the default begin alignment is centerLeft while the end is centerRight.

  const LinearGradient({
    this.begin = Alignment.centerLeft,
    this.end = Alignment.centerRight,
    required super.colors,
    super.stops,
    this.tileMode = TileMode.clamp,
    super.transform,
  });

Create a Gradient Button with ClipRRect widget.

When we use a ClipRRect to create a custom button, we can stack a Container with a gradient decoration and a TextButton which has a onPressed function and Material design button styles.

So we have to pass the Stack widget as the child of the ClipRRect. We can use the Positioned.fill widget to wrap the container. Then we can use the BoxDecoration gradient param, to pass a LinearGradient with a list of colors.

class GradientButton extends StatelessWidget {
  const GradientButton({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(4),
      child: Stack(
        children: <Widget>[
          Positioned.fill(
            child: Container(
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  colors: <Color>[
                Color(0xffff6c42),
                Color(0xffff8764),
                Color(0xffffa990),
                  ],
                ),
              ),
            ),
          ),
          TextButton(
            style: TextButton.styleFrom(
              foregroundColor: Colors.white…