flutter - How to change OutlinedButton border radius

Flutter - OutlinedButton Border Radius

The OutlinedButton class represents a material design outlined button that is essentially a TextButton with an outlined border. The outlined buttons are medium-emphasis buttons. In a flutter application, the OutlinedButtons contain actions that are important, but they are not the primary action in an app. An OutlinedButton widget’s default style is defined by defaultStyleOf. The flutter application developers can override the OutlinedButton’s style with its style parameter. An OutlinedButton has a default ButtonStyle.side which defines the appearance of the outline. The flutter app developers can specify an OutlinedButton's shape and the appearance of its outline by specifying both the ButtonStyle.shape and ButtonStyle.side properties.

The following flutter application development tutorial will demonstrate how to set or change the OutlinedButton widget’s border-radius. That means how we can make rounded corners OutlinedButton. Here we will use the OutlinedButton class’s styleFrom() method to make the OutlinedButton corners rounded.

The OutlinedButton class’s styleFrom() method is a static convenience method that constructs an outlined button ButtonStyle given simple values. By default, OutlinedButton class styleFrom() method returns a ButtonStyle that doesn't override anything.

The ButtonStyle class represents the visual properties that most buttons have in common. The ButtonStyle class’s all properties are null by default.

The flutter developers can add a rounded border to the OutlinedButton by passing a value to the styleFrom() method’s shape parameter. It also changes the OutlinedButton shape.

The styleFrom() method’s shape parameter value is an OutlinedBorder instance which adds a border to the OutlinedButton widget.

The OutlinedBorder class represents a ShapeBorder that draws an outline with the width and color specified by the side. Here we will pass a RoundedRectangleBorder instance for the shape parameter value.

The RoundedRectangleBorder class represents a rectangular border with rounded corners. The RoundedRectangleBorder class borderRadius property value specifies the radii for each corner. Using this parameter value we make the OutlinedButton corners rounded.

The BorderRadius class represents an immutable set of radii for each corner of a rectangle. The BorderRadius.all(Radius radius) constructor creates a border radius where all radii are radius. So using this constructor we can make a rounded corners OutlinedButton in which all corner radii are equal.

So finally, the flutter app developers can change an OutlinedButton’s border-radius by passing a RoundedRectangleBorder instance to the OutlinedButton class’s styleFrom() method’s shape parameter.

main.dart

import 'package:flutter/material.dart';

void main() => runApp(const FlutterExample());

class FlutterExample extends StatelessWidget {
  const FlutterExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Example',
        theme: ThemeData(primarySwatch: Colors.green),
        home: const StateExample()
    );
  }
}

class StateExample extends StatefulWidget {
  const StateExample({Key? key}) : super(key: key);

  @override
  _StateExampleState createState() => _StateExampleState();
}

class _StateExampleState extends State<StateExample>{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFFEFEFA),
      appBar: AppBar(
          title: const Text("Flutter - OutlinedButton Border Radius")
      ),
      body: bodyContent(),
    );
  }


  bodyContent() {
    return Center(
        child: OutlinedButton(
          child: const Text("I am a Button"),
          style: OutlinedButton.styleFrom(
              padding: const EdgeInsets.all(20),
              shape: const RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(20))
              )
          ),
          onPressed: (){
            // do something here
          },
        )
    );
  }
}