Implementing rounded buttons in Flutter (2021)

Last updated on January 4, 2021 The Frog Loading... Post a comment

Today, rounding sharp edges of rectangular objects is a popular trend in design. You can see this everywhere, from cell phones to laptops, from TVs to car monitors. Websites and mobile applications are also in this school with the roundedness of many of the elements appearing on the screen.

In this article, we will go over several approaches to make rounded buttons in Flutter applications. Boring sentences will be limited and replaced with more examples and illustrations.

Using ElevatedButton + RoundedRectangleBorder

Example:

ElevatedButton(
        style: ElevatedButton.styleFrom(
            padding: EdgeInsets.symmetric(horizontal: 50, vertical: 10),
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20))),
        child: Text('Button', style: TextStyle(fontSize: 24),),
        onPressed: () {},
)

Output:

Using ElevatedButton + StadiumBorder

This approach helps you easily create a perfect pill button.

Sample code:

ElevatedButton(
            style: ElevatedButton.styleFrom(
              shape: StadiumBorder(),
            ),
            child: Text('Pill Button'),
            onPressed: () {},
          ),

Output:

Using InkWell + Material

The code:

Material(
          color: Colors.amber,
          borderRadius: BorderRadius.circular(15),
          child: InkWell(
            hoverColor: Colors.orange,
            splashColor: Colors.red,
            focusColor: Colors.yellow,
            highlightColor: Colors.purple,
            onTap: () {},
            borderRadius: BorderRadius.circular(20),
            child: Container(
              width: 200,
              height: 60,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15),
              ),
              alignment: Alignment.center,
              child: Text('Button'),
            ),
          ),
),

Output:

Using OutlinedButton + RoundedRectangleBorder

The code:

OutlinedButton(
        style: OutlinedButton.styleFrom(
            elevation: 6,
            padding: EdgeInsets.symmetric(horizontal: 50, vertical: 10),
            backgroundColor: Colors.amber,
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20))),
        child: Text(
          'Button',
          style: TextStyle(fontSize: 24),
        ),
        onPressed: () {},
)

Output:

Using GestureDetector

Note: The GestureDetector widget doesn’t provide ripple effects and is rarely used to create buttons.

The code:

GestureDetector(
          onTap: () {},
          child: Container(
            width: 240,
            height: 80,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(15),
              color: Colors.blue[200],
            ),
            child: Text('Button'),
          ),
        ),

Output:

Conclusion

This article has covered many ways to create a rounded button in a Flutter application. Which method do you like best and will use in your projects?

You can explore more about the button topic by taking a look at the following articles: Flutter Cupertino Button – Tutorial and ExamplesWorking with ElevatedButton in FlutterHow to make Circular Buttons in FlutterWorking with TextButton in Flutter. You can also check our Flutter category page for more tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles