Flutter 2.0 Depreciation Impact on Buttons Widgets

What’s New and Deprecated in Flutter 2.0

Flutter is an Open Source Platform that was Created and Handles by Google, Which Supports multiple platforms using the same code base to produce the application. Google in march 2021 announces the new version of Flutter which is 2.0. It was a major update to the flutter platform which gives more controls to the developers in terms of developing better UI.

What’s Deprecated In Flutter 2.0.0

Since Flutter 2.0 was released, there are some minor and significant changes in the version and a some depreciations which was shipped by flutter developers.

So when after updating the flutter CLI to 2.0 and attempts to run the older version projects then there will be a warning(strike through) sign/effect in the IDE which can undoubtedly give you the idea regarding widgets that are deprecated in the new version and One of the Depreciation is related to Flutter Buttons Widgets, beneath you can discover the list of Flutter Depreciate Buttons Widgets:

  • RaisedButton Widget
  • FlatButton Widget
  • OutlineButton Widget

The Alternative of the Deprecated Button Widgets:

  • ElevatedButton
  • TextButton
  • OutlinedButton

Note For Beginners:

You will discover few depreciated widgets in a ton of old projects, instructional exercises, tutorials, and resources on the web, and utilizing them is not wrong or you can utilize them, they are accessible in the flutter 2.0 also and they will stick around for many versions to come.

Deprecated Warning in Visual Code

To remove Deprecated warning in the IDE(Visual Code):
1. Go to File > Prefences > Settings
2. Search for “deprecated” in the search bar
3. Uncheck/disable show Deprecated option

Visual Code Deprecated Settings

Visual Changes

Visually, the new buttons look somewhat changed, because they match the current Material Design spec and their colors are configured in the term that they get default Theme Color Scheme automatically, There is not only this but also other smaller differences such as padding, rounded and the hover/focused/pressed feedback.

Comparison b/w Deprecated and New Button Widgets

The new buttons widget color combination follows the “normalized” pattern which flutter adopted for material widgets. Theme properties and widget constructor parameters are null by default. Non-null theme properties and widget parameters specify an override of the component’s default value.

Programmatical Implementation Comparison without any style

Let’s discover the programmatical comparisons between the deprecated button widgets and the new button widgets by comparing the alternatives to each other

ElevatedButton alternative of RaisedButton:

below is the implementation of simple RaisedButton with on press event

RaisedButton(
child: Text(‘A Raised Button’),
onPressed: () {
print(‘Pressed raised button’);
})

Migration to ElevatedButton with on press event

ElevatedButton(
child: Text('A Elevated Button'),
onPressed: () {
print('Pressed Elevated button');
})

TextButton alternative of FlatButton:

below is the implementation of simple FlatButton with on press

FlatButton(
child: Text('A Flat Button'),
onPressed: () {
print('Pressed flat button');
})

Migration to TextButton with on press event

TextButton(
child: Text('A Text Button'),
onPressed: () {
print('Pressed Text button');
})

OutlinedButton alternative of old OutlineButton:

below is the implementation of simple OutlineButton

OutlineButton(
child: Text('A outline Button'),
onPressed: () {
print('Pressed outline button');
})

Migration to new OutlinedButton

OutlinedButton(
child: Text('A outlined Button'),
onPressed: () {
print('Pressed outlined button');
})

ButtonStyle instead of individual style:

With Flutter 2.0 version introduce the ButtonStyle object which is a single object which will work with all ElevatedButton, TextButton and OutlinedButton similar to how a TextField or a Text widget can be configured with a TextStyle object. Most of the ButtonStyle properties are characterized with MaterialStateProperty, so a solitary property can address various styles relying upon the button’s colors, pressed/focused/hovered/ and so on.

Below is the implementation of all new button widgets with basic styling for text color, background color and overlay color:

ElevatedButton(
style: ButtonStyle(
overlayColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.hovered))
return Colors.blue.withOpacity(0.04);
if (states.contains(MaterialState.focused) ||
states.contains(MaterialState.pressed))
return Colors.blue.withOpacity(0.12);
return null;
},
),
backgroundColor: MaterialStateProperty.all(Colors.red),
foregroundColor: MaterialStateProperty.all(Colors.white)),
child: Text('A Elevated Button'),
onPressed: () {
print('Pressed elevated button');
})
TextButton(
style: ButtonStyle(
overlayColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.hovered))
return Colors.blue.withOpacity(0.04);
if (states.contains(MaterialState.focused) ||
states.contains(MaterialState.pressed))
return Colors.blue.withOpacity(0.12);
return null;
},
),
backgroundColor: MaterialStateProperty.all(Colors.red),
foregroundColor: MaterialStateProperty.all(Colors.white)),
child: Text('A Text Button'),
onPressed: () {
print('Pressed Text button');
})
OutlinedButton(
style: OutlinedButton.styleFrom(
primary: Colors.blue, side: BorderSide(color: Colors.blue)),
child: Text('A outlined Button')
onPressed: () {
print('Pressed outlined button');
})

In the above example, it is stated that a ButtonStyle is not supported text color and color instead the visual attributes of the new buttons and themes are configured with a single ButtonStyle object, similar to how a TextField or a Text widget can be configured with a TextStyle object. Most of the ButtonStyle properties are defined with MaterialStateProperty.all(), so that a single property can represent different values of the button, such as backgroundColor for the background of the button, foregroundColor for the text color of the button and overlayColor to gives different feedback when the button hovered, focused or pressed, Not only this but style argument in Elevated, TextButton, and OutlinedButton can also work with an alternative option which is StyleFrom() and styleFrom() methods gives all the properties to style the button as we can see in the above example as in OutlinedButton we derive styleFrom by calling the OutlinedButton class.

So to recap:

  • RaisedButton,FlatButton and OutlineButton is depericated in Flutter 2.0
  • Flutter 2.0 introduces the new buttons (ElevatedButton,TextButton and OutlinedButton) as a replacement
  • New Buttons takes default theme color for text and background if not defined to specific button.
  • New buttons takes ButtonStyle object which can be defined with MaterialStateProperty.all()
  • Buttons can also style with styleFrom method which can be derived from button class

Happy coding and writing about coding!

Angular | React | Flutter | Node.JS | Ionic | MongoDB | DynamoDB | Express

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store