Flutter 2.0 how to change elevatedButtonTheme to look like RaisedButton

user_2105374 0
Viewed 5011

Since RaisedButton has been changed for ElevatedButton in flutter 2.0 I try to create a default theme for the button but I can't figure how I can do it.

Here is what I put in my main()

elevatedButtonTheme: ElevatedButtonThemeData(
            style: ButtonStyle(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20))),
          ),

and I get the following error

The argument type 'RoundedRectangleBorder' can't be assigned to the parameter type 'MaterialStateProperty<OutlinedBorder>'.

I cannot figure how to use the MaterialStateProperty parameter since it doesn't give me any clue on how to use it. I read the documentation but there is no example on this.

Anyone know?

flutter
4 Answers

You can refer to this documentation on ButtonStyle to know which MaterialStateProperty fields there are to use.

For example, to define the shape, you can use the following code:

shape: MaterialStateProperty.resolveWith<OutlinedBorder>((_) {
             return RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20)))
             );
           }),

Full example:

ElevatedButtonTheme(
  data: ElevatedButtonThemeData(
    style: ButtonStyle(
      side: MaterialStateProperty.resolveWith<BorderSide>(
          (states) => BorderSide(color: borderColor ?? Colors.black)),
      backgroundColor: MaterialStateProperty.resolveWith<Color>(
          (states) => Colors.white),
      shape: MaterialStateProperty.resolveWith<OutlinedBorder>((_) {
        return RoundedRectangleBorder(borderRadius: BorderRadius.circular(20));
      }),
      textStyle: MaterialStateProperty.resolveWith<TextStyle>(
          (states) => TextStyle(color: Colors.red)),
    ),
  ),
  child: ElevatedButton(onPressed: () {}, child: Text('label')),
);
user_104884440

Try this

    ElevatedButton(
              onPressed: () {},
              child: Text("Button"),
              style: TextButton.styleFrom(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20))),
            ),

  elevatedButtonTheme: ElevatedButtonThemeData(
          style: TextButton.styleFrom(
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20))),
        ),
user_127892000

You can use this guide from the Flutter team https://docs.google.com/document/d/1yohSuYrvyya5V1hB6j9pJskavCdVq9sVeTqSoEPsWH0/edit

but this is the correct code to make ElevatedButton looks like RaisedButton

final ButtonStyle raisedButtonStyle = ElevatedButton.styleFrom(
  onPrimary: Colors.black87,
  primary: Colors.grey[300],
  minimumSize: Size(88, 36),
  padding: EdgeInsets.symmetric(horizontal: 16),
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(2)),
  ),
);
ElevatedButton(
  style: raisedButtonStyle,
  onPressed: () { },
  child: Text('Looks like a RaisedButton'),
)
user_139154840

try this

ElevatedButton(
    style: ButtonStyle(
        shape: MaterialStateProperty.all<OutlinedBorder>(
            RoundedRectangleBorder(
                side:
                    BorderSide(width: 1.0, color: Color.black),
                borderRadius:
                    BorderRadius.circular(5.0))),
        backgroundColor: MaterialStateProperty.all<Color>(Color.red),
        foregroundColor: MaterialStateProperty.all<Color>(Color.green),
        elevation:
            MaterialStateProperty.all<double>(8.0),
        padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
            const EdgeInsets.symmetric(
                horizontal: 20.0,
                vertical: 5.0))),
    onPressed: (){},
    child: Text('Tap Me'))
user_21260770
Related