Replace deprecated RaisedButton with ElevatedButton

Question

I used RaisedButton this way:

RaisedButton(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24.0)),
                        onPressed: null,
                        padding: EdgeInsets.all(12.0),
                        color: Colors.blue,
                        child: Text("Button", style: TextStyle(color: Colors.white)))

They decided to make RaisedButton deprecated and ElevatedButton should be used instead. However, padding and shape properties are missing. How to get the same effect with ElevatedButton?

user_11079057 · Answer

Just replace your code with this

ElevatedButton(
style: ElevatedButton.styleFrom(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24.0)),
  padding: const EdgeInsets.all(12.0),
  primary: Colors.blue,
),
onPressed: null,
child: const Text('Button', style: TextStyle(color: Colors.white))),

user_7183677 · Answer

You can use the style property in the ElevatedButton, and then you can use ElevatedButton.styleFrom and in there you will find the properties like padding and shape.

Here is an example:

ElevatedButton(
    style: ElevatedButton.styleFrom(
        primary: Colors.blue,
        elevation: 5,
        padding: const EdgeInsets.all(12.0),
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(30.0),
        ),
    ),
    onPressed: () {},
    child: Text(
        "Button",
        style: TextStyle(color: Colors.white),
    ),
),

user_13997210 · Answer

Try this code hope its help to you its similar to RaisedButton

    ElevatedButton(
        onPressed: () {},
        style: ElevatedButton.styleFrom(
          fixedSize: Size(90, 15),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(24.0),
            ),
          ),
        ),
        child: Text("ok"),
      ),

Your result screen->

user_15049264 · Answer

Lets try with this and show side by side

Column(
              children: [
                RaisedButton(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(24.0)),
                    onPressed: null,
                    padding: EdgeInsets.all(12.0),
                    color: Colors.blue,
                    child:
                        Text("Button", style: TextStyle(color: Colors.white))),
                SizedBox(
                  height: 10,
                ),
                ElevatedButton(
                    style: ElevatedButton.styleFrom(
                        onPrimary: Colors.blue,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(24.0),
                        )),
                    onPressed: () {},
                    child: Container(
                      padding: const EdgeInsets.symmetric(horizontal: 12.0),
                      child:
                          Text("Button", style: TextStyle(color: Colors.white)),
                    )),
              ],
            ),

output:

Replace deprecated RaisedButton with ElevatedButton

4 Answers