How To Set Flutter Material Button Rounded Corners [Easy Flutter Guide]

In this tutorial, we’ll learn how to properly implement Flutter material button rounded corners by using practical Flutter code examples.

Introduction: Flutter Material Button Rounded Corners

As the name suggests, it specifies the process of making the edges/corners of material button circular. Let’s first see the default shape of corners. After that, we’ll make them circular using practical code examples.

Default Flutter Material Button Corners Shape

For that, we’ve to implement a simple Flutter material button widget with some background color, so the whole button is visible. See below code:

MaterialButton(
            onPressed: () {},
            color: Colors.blue,
            textColor: Colors.white,
                   child: Text(
                      'Flutter Material Button',
                    ))

Above image shows the default corner shape of material button.

Implementing Flutter Material Button Rounded Corners (Multiple Examples)

In order to do that, we’ve to use the shape constructor of our Flutter material button widget and pass it round rectangle border widget. This widget has a border radius constructor which can take different methods. See below list:

BorderRadius.circular()
BorderRadius.horizontal()
BorderRadius.vertical()
BorderRadius.only()

Border Radius Circular

If we want to make each and every edge of Flutter material button circular and all of the same value, then we can use the below code:

shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(11))

flutter material button border radius circular

If we want some edges to have a different radius value then we can use the copyWith method. See below code:

flutter material button border radius circular shape

 shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(11).copyWith(
                  bottomLeft: Radius.circular(5),
                  topRight: Radius.circular(20)))

Border Radius Horizontal

If we want to give top right and bottom right edge a same value and top left and bottom left a same value, then use the below code:

flutter material button border radius horizontal

 shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.horizontal(
                  left: Radius.circular(20),
                  right: Radius.circular(10)))

We can use copyWith method here as well.

Border Radius Vertical

If you want to give top right and top left edge a same value and bottom right and bottom left edge a same value, then use the below code:

flutter material button border radius vertical

 shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(
                  top: Radius.circular(20),
                  bottom: Radius.circular(10)))

We can use copyWith method here as well.

Border Radius Only

If we want to provide each edge of Flutter material button with different/same value, then use the below code:

shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                 topLeft: Radius.circular(10),
                 topRight: Radius.circular(40),
                 bottomLeft: Radius.circular(20),
                 bottomRight: Radius.circular(3),
                    ))

We can use copyWith method here as well but it won’t be a good practice.

So this is how we can implement Flutter material button rounded corners.

We’ve discussed it in detail so you can have a better idea of how to customize the shape of Flutter material button widget. Hope you like this post.

The complete source code of Flutter material button rounded corners is given in the below section.

Flutter Material Button Rounded Corners Source Code

flutter material button rounded corners

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Center(
                child: MaterialButton(
                    onPressed: () {},
                    color: Colors.blue,
                    textColor: Colors.white,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20)),
                    child: Text(
                      'Flutter Material Button',
                    )))));
  }
}

Conclusion

To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to implement Flutter material button rounded corners. I’d love to have your feedback on this post.

I’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.