Flutter – Material Buttons and their Theme Update

  • Flutter 1.22 update bought a new universe of Material buttons, and older ones though are currently supported, will be deprecated sometime in the future.
  • Reason:  It was difficult to explain how the overall Theme and its ButtonTheme contribute to button defaults, and it was particularly difficult to apply these themes to produce even simple changes. You can read more about the existing problems with custamizing material buttons here.
  1. TextButton – TextButton is replacement for FlatButton, and is generally used for less-pronounced actions, including those located in dialogs and cards. It doesn’t have visible borders.
TextButton(
  onPressed: () => print('Hey, you have pressed TextButton'),
  child: Text('TextButton'),
),
  • The text button’s default style is defined by defaultStyleOf. The style of this text button can be overridden with its style parameter.
  • The style of all text buttons in a subtree can be overridden with the TextButtonTheme and the style of all of the text buttons in an app can be overridden with the Theme‘s ThemeData.textButtonTheme property.
textButtonTheme: TextButtonThemeData(
  style: TextButton.styleFrom(
    primary: Colors.green,
    textStyle: TextStyle(
      fontSize: 20
    )
  ),
),
  • If onPressed and onLongPressed callbacks are null, this button will be disabled and won’t react to touch.
This image has an empty alt attribute; its file name is text_button.jpg

2. ElevatedButton – ElevatedButton is replacement for RaisedButton, used as primary actions to your app.

ElevatedButton(
  onPressed: () => print('Hey, you have pressed ElevatedButton'),
  child: Text('ElevatedButton'),
),
  • The elevated button’s default style is defined by defaultStyleOf. The style of this elevated button can be overridden with its style parameter.
  • The style of all elevated buttons in a subtree can be overridden with the ElevatedButtonTheme, and the style of all of the elevated buttons in an app can be overridden with the Theme‘s ThemeData.elevatedButtonTheme property.
elevatedButtonTheme: ElevatedButtonThemeData(
  style: ElevatedButton.styleFrom(
      primary: Colors.red,
      textStyle: TextStyle(
          fontSize: 20
      )
  ),
),
  • If onPressed and onLongPressed callbacks are null, this button will be disabled and won’t react to touch.

3. OutlinedButton – OutlinedButton is replacement for OutlineButton. These are medium-emphasis buttons. They contain actions that are important, but they aren’t the primary action in an app.

OutlinedButton(
  onPressed: () => print('Hey, you have pressed OutlinedButton'),
  child: Text('OutlinedButton'),
),
  • The outlined button’s default style is defined by defaultStyleOf. The style of this outline button can be overridden with its style parameter.
  • The style of all text buttons in a subtree can be overridden with the OutlinedButtonTheme and the style of all of the outlined buttons in an app can be overridden with the Theme‘s ThemeData.outlinedButtonTheme property.
outlinedButtonTheme: OutlinedButtonThemeData(
  style: OutlinedButton.styleFrom(
      primary: Colors.red,
      textStyle: TextStyle(
          fontSize: 20
      )
  ),
),

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s