New Button for Flutter 1.22

TextButton, OutlinedButton, and ElevatedButton were added to Flutter version 1.22. Although the old Button was not scrapped, the new Button is recommended.

Why was Button added? Because it is difficult to adjust the previous buttons to a unified appearance, so the previous use of custom buttons, but the new button to solve this problem, it is very convenient to set the overall appearance.

Style comparison:

There is no big difference in appearance, but TextButton, OutlinedButton and ElevatedButton aggregate appearance attributes into a ButtonStyle, which is very convenient for unified control.

TextButton, OutlinedButton and ElevatedButton have the same usage and attributes. The following uses TextButton as an example.

Simple use:

TextButton(
  child: Text('TextButton'),Copy the code

The button is unavailable when onPressed is not set or is set to NULL.

TextButton(
  child: Text('TextButton'),
  onPressed: (){},
)
Copy the code

OnPressed is the click callback and onLongPress is the long-press callback.

Here is the most important property, ButtonStyle, through which all appearance is controlled:

const ButtonStyle({
  this.textStyle, / / font
  this.backgroundColor, / / the background color
  this.foregroundColor, / / the foreground
  this.overlayColor, // Highlight the color of a focused, hovered, or pressed button
  this.shadowColor, // Shadow color
  this.elevation, / / shadow value
  this.padding, // padding
  this.minimumSize, // Minimum size
  this.side, / / frame
  this.shape, / / shape
  this.mouseCursor, // When the cursor of the mouse pointer enters or hovers over [InkWell] of this button.
  this.visualDensity, // The compactness of the button layout
  this.tapTargetSize, // The area that responds to the touch
  this.animationDuration, // Duration of animation changes for [shape] and [elevation].
  this.enableFeedback, // Whether detected gestures should provide audible and/or tactile feedback. On Android, for example, a click produces a click, and a long press produces a brief vibration when feedback is enabled. Typically, the component defaults to true.
});
Copy the code

The use of these attributes is also different from before. For example, instead of setting textStyle directly, set the font as follows:

TextButton(
  child: Text('TextButton'),
  onPressed: () {},
  style: ButtonStyle(
    textStyle: MaterialStateProperty.all(TextStyle(fontSize: 20)),),)Copy the code

Note: The font color is not set by textStyle, but by foregroundColor:

TextButton(
  child: Text('TextButton'),
  onPressed: () {},
  style: ButtonStyle(
    foregroundColor: MaterialStateProperty.all(Colors.red),
  ),
)
Copy the code

Change font color according to button state:

TextButton(
                    child: Text('TextButton'),
                    onPressed: () {},
                    style: ButtonStyle(
                      foregroundColor:
                          MaterialStateProperty.resolveWith((states) {
                        returnstates.contains(MaterialState.pressed) ? Colors.blue : Colors.red; }),),)Copy the code

The other attributes are similar and will not be described in detail.

Carry out global control:

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    textButtonTheme: TextButtonThemeData(
      style: ButtonStyle()
    ),
    elevatedButtonTheme: ElevatedButtonThemeData(
        style: ButtonStyle()
    ),
    outlinedButtonTheme: OutlinedButtonThemeData(
        style: ButtonStyle()
    )
  ),
  home: MyHomePage(title: 'Flutter Demo Home Page'),Copy the code

The configuration of properties within ButtonStyle is consistent with the use of individual buttons.

Based on the above introduction, it is recommended to replace FlatButton, OutlineButton, and RaisedButton with TextButton, OutlinedButton, and ElevatedButton.

communication

Lao Meng Flutter blog (330 controls usage + practical primer series) : laomengit.com