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")

Then, wrap the text widget as OulinedButton Widget.

OutlinedButton(
     onPressed: () {},
     child: Text("Outlined Button"),
   ),

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

Changing Outline/border color

OutlinedButton(
          style: OutlinedButton.styleFrom(
            side: BorderSide(color: Colors.blue, width: 2),
          ),
          onPressed: () {},
          child: Text(
            "Outlined Button",
            style: TextStyle(color: Colors.black),
          ),
        ),

Changing Button background color

OutlinedButton(
          style: OutlinedButton.styleFrom(
                 backgroundColor: Colors.blue[200],
                 ),
          onPressed: () {},
          child: Text(
            "Outlined Button",
            style: TextStyle(color: Colors.black),
          ),
        ),

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,
            textStyle: TextStyle(
              color: Colors.black,
              fontSize: 20,
              fontStyle: FontStyle.italic,
            ),
          ),
          onPressed: () {

          },
        ),

Changing Shadow and Elevation

 OutlinedButton(
          child: Text("Outlined Button"),
          style: OutlinedButton.styleFrom(
            backgroundColor: Colors.blue,
            primary: Colors.white,
            shadowColor: Colors.red,
            elevation: 10,
          ),
          onPressed: () {},
        ),

Changing Shape

OutlinedButton(
          child: Text("Outlined Button"),
          style: OutlinedButton.styleFrom(
            backgroundColor: Colors.blue,
            primary: Colors.white,
            shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.all(
                Radius.circular(18),
              ),
            ),
          ),
          onPressed: () {},
        ),

Reference: visit flutter.dev