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?

Solution 1

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

Solution 2

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

Solution 3

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

Solution 4

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:

View more solutions