How To Change Flutter OutlinedButton Border Radius [Flutter Easy Guide]

In this tutorial, we’ll learn how to properly customize Flutter outlinedButton border radius by using practical Flutter code examples.

Outline

1. Introduction: Flutter OutlinedButton Border Radius
2. Default Flutter OutlinedButton Shape
3. Customizing Flutter OutlinedButton Border Radius (Multiple Examples)
4. Border Radius Circular
5. Border Radius Horizontal
6. Border Radius Vertical
7. Border Radius Only
8. Custom Flutter OutlinedButton Border Radius Source Code
9. Conclusion

Introduction: Flutter OutlinedButton Border Radius

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

Default Flutter OutlinedButton Shape

For that, we’ve to implement a simple Flutter outlinedButton widget. We also have given it a background color. See below code:

OutlinedButton(
                onPressed: () {},
                style: OutlinedButton.styleFrom(
                        backgroundColor: Colors.blue,
                     ),
                    child: Text(
                      'Flutter Outlined Button',
                      style: TextStyle(color: Colors.white),
                    ))

Above image shows the default border radius of outlinedButton.

Customizing Flutter OutlinedButton Border Radius (Multiple Examples)

In order to do that, we’ve to use the style constructor of our Flutter outlinedButton widget and pass OutlinedButton.styleFrom( ).

After that, we’ve to use its shape constructor and pass it round rectangle border widget. This widget has a border radius constructor which can take different methods. See below list:

style: OutlinedButton.styleFrom(
           backgroundColor: Colors.blue,
           shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(15)))

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

 shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(7).copyWith(
                  bottomLeft: Radius.circular(57),
                  topRight: Radius.circular(23)))

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:

 shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.horizontal(
                  right: Radius.circular(25),
                  left: Radius.circular(9)))

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:

 shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(
                  top: Radius.circular(25),
                  bottom: Radius.circular(11)))

We can use copyWith method here as well.

Border Radius Only

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

shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                 topRight: Radius.circular(7),
                 topLeft: Radius.circular(21),
                 bottomLeft: Radius.circular(41),
                 bottomRight: Radius.circular(11),
                    ))

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: OutlinedButton(
                    onPressed: () {},
                    style: OutlinedButton.styleFrom(
                        backgroundColor: Colors.blue,
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.only(
                          topRight: Radius.circular(7),
                          topLeft: Radius.circular(21),
                          bottomLeft: Radius.circular(41),
                          bottomRight: Radius.circular(11),
                        ))),
                    child: Text(
                      'Flutter Outlined Button',
                      style: TextStyle(color: Colors.white),
                    )))));
  }
}