New Material Buttons And ButtonThemes After Flutter 2.0

With the release of Flutter 2.0, the deprecated FlatButton, RaisedButton, and OutlineButton widgets have been replaced by TextButton, ElevatedButton, and OutlineButton widgets, respectively. These new Flutter widgets offer more control over the appearance and behavior of buttons, allowing developers to create more customized user interfaces. In addition, Flutter also provides ButtonThemes further to customize the look and feel of the buttons.

TextButton

The TextButton widget is a flat button widget with no background color or border. It is used for buttons that do not require any additional visual effects or styling. The TextButton widget provides some basic theming options, including the ability to change the button’s text color and text style.

To change the text color of a TextButton, you can use the style property and set the color property of the ButtonStyle object:

TextButton(
  style: ButtonStyle(
    foregroundColor: MaterialStateProperty.all(Colors.red),
  ),
  onPressed: () {},
  child: Text('Click me'),
)

In this example, the foregroundColor property of the ButtonStyle object is set to red, which changes the button’s text colour to red.

ElevatedButton

The ElevatedButton widget is a raised button widget with a background color and a shadow effect. It is used for buttons that need to stand out from the rest of the user interface. The ElevatedButton widget provides advanced theming options, including changing the button’s background color, text color, and shape.

To change the background color of an ElevatedButton, you can use the style property and set the backgroundColor property of the ButtonStyle object:

ElevatedButton(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.blue),
  ),
  onPressed: () {},
  child: Text('Click me'),
)

In this example, the backgroundColor property of the ButtonStyle object is set to blue, which changes the button’s background colour to blue.

OutlinedButton

The OutlineButton widget is a button widget with a transparent background and a border. It is used for buttons that need to be visible but not distract from the rest of the user interface. The OutlinedButton widget provides advanced theming options, including changing the button’s border color, text color, and shape.

To change the border color of an OutlinedButton, you can use the style property and set the side property of the BorderSide object:

OutlinedButton(
  style: ButtonStyle(
    side: MaterialStateProperty.all(
      BorderSide(color: Colors.red),
    ),
  ),
  onPressed: () {},
  child: Text('Click me'),
)

In this example, the side property of the ButtonStyle object is set to a red BorderSide object, which changes the button’s border colour to red.

ButtonStyle in Flutter

ButtonStyle is a new class introduced in Flutter 2.0, allowing experts to customise buttons’ look and feel. It is used to define the visual appearance of a button, such as its background color, text color, shape, and padding.

ButtonStyle is a combination of different attributes that can be used to create a custom button style. Some of the attributes that can be customized include:

• Background color: This property allows you to set the button’s background colour.
• Text color: This property allows you to set the color of the text displayed on the button.
• Shape: This property allows you to set the shape of the button. You can choose from pre-defined shapes, such as rounded or rectangular, or create your own custom shape.
• Padding: This property allows you to set the padding around the button.
• TextStyle: This property allows you to set the font style of the text displayed on the button.

How to Use ButtonStyle in Flutter?

To use ButtonStyle, you first need to create an instance of the ButtonStyle class. You can then customize the different attributes of the button style by setting their values. Once the ButtonStyle is defined, you can apply it to a button using the style property.

Here’s an example of how to use ButtonStyle to create a custom style for a TextButton:

ButtonStyle myButtonStyle = ElevatedButton.styleFrom(
  primary: Colors.red,
  padding: EdgeInsets.all(16.0),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20.0),
  ),
);

TextButton(
  onPressed: () {
    // Add your onPressed logic here
  },
  child: Text('My Button'),
  style: myButtonStyle,
)

In the above example, we first define a custom ButtonStyle called myButtonStyle. We set the background color to red, the padding to 16.0, and the shape to a circular border with a radius of 20.0. We then apply the ButtonStyle to a TextButton by setting its style property to myButtonStyle.

ButtonThemes

Flutter 2.0 also introduced some improvements to button theming, making applying consistent styles to all buttons in an app easier. Button themes define the default styling for button widgets in an app. Button themes can be customized by setting properties such as the button’s background color, text color, and shape.

To create a custom button theme, you can use the ThemeData class and set the buttonTheme property:

final myButtonTheme = ThemeData(
  buttonTheme: ButtonThemeData(
    buttonColor: Colors.blue,
    textTheme: ButtonTextTheme.primary,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10.0),
    ),
  ),
);

In this example, the buttonColor property of the ButtonThemeData object is set to blue, the textTheme property is set to ButtonTextTheme.primary, and the shape property is set to a circular border with a radius of 10.0.

Conclusion

After Flutter 2.0, the Material Buttons and ButtonThemes have undergone significant changes and improvements, providing developers more flexibility and control over their app’s user interface. It allows developers to create custom button themes to match their app’s overall design. The updated ButtonThemes define a consistent look and feel for all the buttons in their flutter app development. Hence, with these improvements, Flutter provides a robust and user-friendly development environment for creating modern and engaging mobile applications.

Frequently Asked Questions (FAQs)

1. How to change the button style in Flutter development?

To modify a Text Button colour in Flutter, add an interior style parameter and assign TextButton. styleForm() with a primary property set to any colour of choice.

2. State the difference between ButtonStyle and styleFrom.

With the help of ButtonStyle(), you have to define all the essential properties with Buttonsytle. However, the styleForm() picks a default set value, and you can only change the required values.

3. What is the elevated button in Flutter?

An elevated button is the label child displayed on the Material widget whose Material. elevation raises when the button is touched. A label’s Text and Icon widgets are viewed in style’s ButtonStyle.foregroundColor, and the button’s filled background is ButtonStyle.backgroundColor.