Flutter: 2 Ways to Create Gradient Background Buttons

This article shows you a few ways to create buttons with gradient background colors in Flutter without causing side effects like missing ripple effects or producing unwanted borders.

We’ll walk through 2 different examples. The first one uses a combination of ElevatedButton, Ink, and Container. The second one uses Container and MaterialButton.

Using ElevatedButton + Ink + Container

Preview:

The code:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Kindacode.com'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            debugPrint('Hi there');
          },
          style: ElevatedButton.styleFrom(
              padding: EdgeInsets.zero,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20))),
          child: Ink(
            decoration: BoxDecoration(
                gradient:
                    const LinearGradient(colors: [Colors.red, Colors.yellow]),
                borderRadius: BorderRadius.circular(20)),
            child: Container(
              width: 300,
              height: 100,
              alignment: Alignment.center,
              child: const Text(
                'Button',
                style: TextStyle(fontSize: 24, fontStyle: FontStyle.italic),
              ),
            ),
          ),
        ),
      ),
    );
  }

Using Container + MaterialButton

Preview:

The code:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Kindacode.com'),
      ),
      body: Center(
          child: Container(
        width: 300,
        height: 100,
        decoration: const ShapeDecoration(
          shape: StadiumBorder(),
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [Colors.blue, Colors.orange, Colors.green],
          ),
        ),
        child: MaterialButton(
          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
          shape: const StadiumBorder(),
          child: const Text(
            'A Samll Button',
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          onPressed: () {
            debugPrint('Hello!');
          },
        ),
      )),
    );
  }

Conclusion

You’ve learned some techniques to make gradient background buttons in your applications. Keep moving and continue learning more about button stuff and other interesting things in Flutter by taking a look at the following articles:

• How to make Circular Buttons in Flutter
• Working with ElevatedButton in Flutter
• Working with TextButton in Flutter
• How to use OutlinedButton in Flutter
• 4 Ways to Create Full-Width Buttons in Flutter
• Flutter StreamBuilder examples

You can also go to our Flutter topic page or Dart topic page for the latest tutorials and examples.