CODEWITHSUNDEEP
flutterdartbuttondeprecation-warning
user1209216
user1209216

Reputation: 7984

Replace deprecated RaisedButton with ElevatedButton

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?

Upvotes: 2

Views: 6889

Answers (4)

Shahzaib Ahmed
Shahzaib Ahmed

Reputation: 329

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

Upvotes: 5

Jahidul Islam
Jahidul Islam

Reputation: 12595

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: enter image description here

Upvotes: 1

Amro Saad
Amro Saad

Reputation: 58

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

Upvotes: 2

Ravindra S. Patil
Ravindra S. Patil

Reputation: 14885

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-> enter image description here

Upvotes: 1

Related Questions