What is MaterialStateProperty<OutlinedBorder>

Issue

How to use the shape in buttonstyle, MaterialStateProperty<OutlinedBorder> shape

it doesn’t work for me

Solution

Here an example, you can do this to change the shape of ElevatedButton:

ElevatedButton.icon(
          onPressed: () {
            _showCustomerDialog();
          },
          icon: Icon(Icons.person_sharp, color: Colors.black),
          label: Text('Customer 1', style: TextStyle(color: Colors.black)),
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(Color(0xFF10FB06)),
            shape: MaterialStateProperty.all(RoundedRectangleBorder( borderRadius: BorderRadius.circular(40) ))
          ),
        ),

These are the classes of shapes that can be appplied:

1. BeveledRectangleBorder,
2. CircleBorder,
3. ContinuousRectangleBorder,
4. MaterialStateOutlinedBorder,
5. RoundedRectangleBorder,
6. StadiumBorder

All of them are an implementation of OutlinedBorder which is an abstract class, so all of them can apply an especific shape to a button, use either one as you needed.

More info in: https://api.flutter.dev/flutter/painting/OutlinedBorder-class.html

Answered By – Wilson Toribio

Answer Checked By – Candace Johnson (FlutterFixes Volunteer)