Create Outlined Button in Flutter – OutlinedButton Widget

Flutter – Creating the Outlined button is very easy. The OutlinedButton widget allows you to create outlined buttons in an easy way. so, let’s get started.

Creating OutlinedButton

First, create a text widget and give the button name.

Text("Outlined Button")
Code language: JavaScript (javascript)

Then, wrap the text widget as OulinedButton Widget.

OutlinedButton( onPressed: () {}, child: Text("Outlined Button"), ),
Code language: JavaScript (javascript)
flutter oulined button example 1
flutter outlined button example 1

To customize the OutlinedButton widget use style property. Define OulinedButton in style property. The examples are given below,

Changing Outline/border color

OutlinedButton( style: <strong>OutlinedButton.styleFrom( side: BorderSide(color: Colors.blue, width: 2), ),</strong> onPressed: () {}, child: Text( "Outlined Button", style: TextStyle(color: Colors.black), ), ),
Code language: JavaScript (javascript)
Flutter outlined button
Flutter outlined button – border color change

Changing Button background color

OutlinedButton( style: <strong>OutlinedButton.styleFrom( backgroundColor: Colors.blue[200], ),</strong> onPressed: () {}, child: Text( "Outlined Button", style: TextStyle(color: Colors.black), ), ),
Code language: JavaScript (javascript)
Flutter outlined button background-color

Changing Text Style

For more info about text style, visit Text Widget Post.

OutlinedButton( child: Text("Outlined Button"), style: OutlinedButton.styleFrom( backgroundColor: Colors.blue, primary: Colors.white, <strong>textStyle: TextStyle( color: Colors.black, fontSize: 20, fontStyle: FontStyle.italic, ),</strong> ), onPressed: () { }, ),
Code language: HTML, XML (xml)
Flutter outlined button text style

Changing Shadow and Elevation

OutlinedButton( child: Text("Outlined Button"), style: OutlinedButton.styleFrom( backgroundColor: Colors.blue, primary: Colors.white, <strong> shadowColor: Colors.red, elevation: 10,</strong> ), onPressed: () {}, ),
Code language: HTML, XML (xml)
Flutter outlined button shadow and elevation

Changing Shape

OutlinedButton( child: Text("Outlined Button"), style: OutlinedButton.styleFrom( backgroundColor: Colors.blue, primary: Colors.white, <strong> shape: const RoundedRectangleBorder( borderRadius: BorderRadius.all( Radius.circular(18), ),</strong> <strong> ),</strong> ), onPressed: () {}, ),
Code language: HTML, XML (xml)
Flutter outlined button border-radius

Reference: visit flutter.dev