RaisedButton Deprecation and Migration Guide With An Example

• General

Note: This article is written based on the Flutter SDK version 2.10.0.

Flutter’s RaisedButton widget has been deprecated since the release of Flutter 2. Material Design guidelines recommend that if you hire Flutter developers, they will use the ElevatedButton widget instead of the deprecated RaisedButton. This article will provide migration instructions for experts who need to replace RaisedButton with ElevatedButton.

Why is RaisedButton deprecated?

RaisedButton has been deprecated because it is not compliant with the updated Material Design guidelines. According to the updated guidelines, buttons should have a consistent elevation across different platforms, and the raised appearance of RaisedButton widget is not consistent across all platforms. As a result, ElevatedButton was introduced as a replacement, which has a more consistent elevation across different platforms.

Also, Read This Post:

How to Apply Theme on MaterialButton or RaisedButton In Flutter?

Migration Instructions

To migrate from RaisedButton to ElevatedButton, follow these steps:

1. Replace all references to RaisedButton with ElevatedButton in your code.
2. If you used the RaisedButton.icon constructor, replace it with the ElevatedButton.icon constructor.
3. Update any properties that have changed. The following properties have been renamed or replaced:
   1. Color is now style.backgroundColor
   2. textColor is now style.foregroundColor
4. If you were using the disabledColor property, replace it with the style property and set the foregroundColor and backgroundColor properties separately.
5. Import the material.dart package if you haven’t already done so:

import 'package:flutter/material.dart';

6. Update the code where you use RaisedButton to use the ElevatedButton widget instead. For example:

Before:

RaisedButton(
  onPressed: () {
    // Do something when the button is pressed
  },
  child: Text('Click me'),
)

After:

ElevatedButton(
  onPressed: () {
    // Do something when the button is pressed
  },
  child: Text('Click me'),
)

7. If you want to style the ElevatedButton, you can use the style property. For example, to change the button’s background color, you can use:

Example

ElevatedButton(
  onPressed: () {
    // Do something when the button is pressed
  },
aElevatedButton(
  onPressed: () {
    // Do something when the button is pressed
  },
  style: ElevatedButton.styleFrom(
    primary: Colors.red, // Set the button's background color
  ),
  child: Text('Click me'),
)
)

Also, Read This Post:

How to set the width of a RaisedButton in Flutter?

Conclusion

In conclusion, RaisedButton has been deprecated, and coders should use ElevatedButton to comply with the updated Material Design guidelines. The migration process involves replacing all references to RaisedButton with ElevatedButton and updating any styling as required. By following these instructions, the development team of Flutter can ensure that their code is up to date and compliant with the latest Material Design guidelines.

If you want to know the usage of RaisedButton Depreciation and Migration in Flutter app development, then you connect with a leading app development company Flutter Agency who will give you complete guidance and knowledge of Flutter with their skills. Don’t hesitate, and feel free to connect with us!

Frequently Asked Questions (FAQs)

1. Why do we use an elevated button?

An elevated button is labeled child viewed on the Material widget whose Material. elevation raises when the Button is clicked. RaisedButton was utilized for this task earlier, which has now been deprecated.

2. What is the significant difference between the elevated and raised buttons in Flutter?

Elevated buttons are the un-deprecated raised buttons with no explicitly defined button stying. However, elevated buttons can not be styled, meaning you can not change the color of a button, Buttontyle, etc., just like raised buttons.

3. How do you provide elevated button width?

The complete width is set to the Elevated Button by including the style parameter; then, use the ElevatedButton. Styleform class to give the size of Button uButtonn property known as the minimum size.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.