Change Border’s Color, Radius, Width of OutlinedButton in Flutter

The OutlinedButton in Flutter is a button with a border around it. The border color and width can be customized. We will use style property to modify properties of a ButtonStyle like color, radius, and width. OutlinedButton.style takes a ButtonStyle object as an argument.

The following code snippet shows how to change the Border’s Color, Radius, and Width of an OutlinedButton in Flutter.

OutlinedButton(
                        style: OutlinedButton.styleFrom(
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(16.0),
                          ),
                          side: const BorderSide(width: 2, color: Colors.green),
                        ),
                        onPressed: () {},
                        child: Text('OutlinedButton'),
                      ),

OutlinedButton(
                        style: ButtonStyle(
                          shape: MaterialStateProperty.resolveWith<OutlinedBorder?>((states) {
                            if (states.contains(MaterialState.pressed)) {
                              return RoundedRectangleBorder(borderRadius: BorderRadius.circular(0));
                            } else {
                              return RoundedRectangleBorder(borderRadius: BorderRadius.circular(16.0));
                            }
                          }),
                        ),
                        onPressed: () {},
                        child: Text('OutlinedButton with state'),
                      )

Circular OutlinedButton:

OutlinedButton(
                        style: OutlinedButton.styleFrom(
                          shape: const CircleBorder(),
                          side: const BorderSide(width: 2, color: Colors.green),
                        ),
                        onPressed: () {},
                        child: Text('OutlinedButton'),
                      )