Flutter: 2 Ways to Create Gradient Background Buttons (2021)

Last updated on April 5, 2021 A Goodman Loading... Post a comment

This article shows you a few ways to make buttons with gradient background colors in Flutter without causing side effects like missing ripple effect 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: Text('Kindacode.com'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            print('Hi there');
          },
          style: ElevatedButton.styleFrom(
              padding: EdgeInsets.zero,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20))),
          child: Ink(
            decoration: BoxDecoration(
                gradient: LinearGradient(colors: [Colors.red, Colors.yellow]),
                borderRadius: BorderRadius.circular(20)),
            child: Container(
              width: 300,
              height: 100,
              alignment: Alignment.center,
              child: Text(
                'Button',
                style: TextStyle(fontSize: 24, fontStyle: FontStyle.italic),
              ),
            ),
          ),
        ),
      ),
    );
  }

Using Container + MaterialButton

Preview:

The code:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Kindacode.com'),
      ),
      body: Center(
          child: Container(
        width: 300,
        height: 100,
        decoration: ShapeDecoration(
          shape: StadiumBorder(),
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [Colors.blue, Colors.orange, Colors.green],
          ),
        ),
        child: MaterialButton(
          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
          shape: StadiumBorder(),
          child: Text(
            'A Samll Button',
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          onPressed: () {
            print('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:

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

Related Articles

guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x