“This is the 26th day of my participation in the August Gwen Challenge, for more details: August Gwen Challenge” juejin.cn/post/698796…

Side dish continues to try Flutter’s basic buttons; Today, we will learn the MaterialButton series related buttons. The series of MaterialButton as the parent class, derived RaisedButton RaisedButton, FlatButton FlatButton and OutlineButton border button; Flexible use according to different scenarios;

MaterialButton

Source code analysis
Const MaterialButton({Key Key, @required this.onPressed, this.onHighlightChanged, // Highlight the changed callback this.textTheme, // text theme this.textColor, // textColor this.disabledTextColor, // not clickable textColor this.color, // background color this.disabledColor, // Unclickable background color this.highlightColor, // Click On Highlight background color this.splashColor, // Water ripple color this.colorBrightness, this.elevation, // Shadow height this.highlightElevation, // Shadow height this.disabledElevation, // shadow height this.padding, // content margins this.shape, / / this button style. ClipBehavior = Clip. None, / / anti-aliasing shear effect this. MaterialTapTargetSize, / / click target minimal size enclosing animationDuration, This.minwidth, this.height, // this.child,})Copy the code

According to the source code analysis, as the parent class of other buttons, the properties of MaterialButton are relatively clear. The height of the Button can be set with the hight attribute. Its subclass Button can only adjust the height by padding or other means.

Case try

The small dish test found that Hight can set the height of the MaterialButton, but shape button shape is not applicable. Its parent RawMaterialButton is normal; The processing mode of xiao CAI is that the outer layer depends on Material and needs to be clipped into Shape. Need further study;

Material(shape: RoundedRectangleBorder(borderRadius: borderRadius. Circular (30.0)), clipBehavior: Clip. AntiAlias, child: MaterialButton(color: color.teal. WithOpacity (0.4), height: 60.0, child: Text('MaterialButton'), onPressed: () {}))Copy the code

RaisedButton / FlatButton

Source code analysis
const RaisedButton({ Key key, @required VoidCallback onPressed, ValueChanged<bool> onHighlightChanged, ButtonTextTheme textTheme, // ButtonTextTheme Color textColor, // child Color Color disabledTextColor, // can not be clicked when the child Color Color Color, // button background Color disabledColor, // button background Color highlightColor when not clickable, // button background Color splashColor when click highlight, // water ripples colorBrightness, // color contrast double elevation, // shadow height double highlightElevation, // Double disabledElevation, // EdgeInsetsGeometry padding, // ShapeBorder Shape, Clip clipBehavior = clip. none, // MaterialTapTargetSize MaterialTapTargetSize, Duration animationDuration, // animationDuration Widget child,}) const FlatButton({Key Key, @required VoidCallback onPressed, ValueChanged<bool> onHighlightChanged, ButtonTextTheme, // ButtonTextTheme Color textColor, DisabledTextColor, // not clickable child Color Color, // button background Color Color disabledColor, // Unclicked button background Color highlightColor, // clicked button background Color splashColor, // Water ripple Color Brightness colorBrightness, // Color contrast EdgeInsetsGeometry, // ShapeBorder Shape, // button style Clip clipBehavior = clip.None, MaterialTapTargetSize MaterialTapTargetSize, @Required Widget Child,})Copy the code

By analyzing the source code, RaisedButton and FlatButton are basically the same, but RaisedButton has some special attributes of shadow height.

Case try
  1. Small dishes first try the most basic RaisedButton/FlatButton clickable and unclickable styles;
RaisedButton(Child: Text('RaisedButton'), onPressed: () => toast. show('RaisedButton', context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM)) FlatButton(child: Text('FlatButton'), onPressed: () => Toast.show('FlatButton', context, duration: Toast.LENGTH_SHORT, gravity: RaisedButton(child: Text('RaisedButton'), onPressed: null) FlatButton(child: Text('FlatButton'), onPressed: null)Copy the code

  1. ButtonTextTheme is the default child theme. You can set three basic theme styles: Nomal to [themedata.brightness]; Primary corresponds to [themedata.primarycolor]; Accent corresponds to [themedata.accentcolor]; The display effect is obvious;
RaisedButton(child: Text('R.nomal'), textTheme: ButtonTextTheme.normal, onPressed: () => Toast.show('RaisedButton', context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM))
RaisedButton(child: Text('R.primary'), textTheme: ButtonTextTheme.primary, onPressed: () => Toast.show('RaisedButton', context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM))
RaisedButton(child: Text('R.accent'), textTheme: ButtonTextTheme.accent, onPressed: () => Toast.show('RaisedButton', context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM))

FlatButton(child: Text('F.nomal'), textTheme: ButtonTextTheme.normal, onPressed: () => Toast.show('FlatButton', context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM))
FlatButton(child: Text('F.primary'), textTheme: ButtonTextTheme.primary, onPressed: () => Toast.show('FlatButton', context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM))
FlatButton(child: Text('F.accent'), textTheme: ButtonTextTheme.accent, onPressed: () => Toast.show('FlatButton', context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM))
    
OutlineButton(child: Text('O.nomal'), textTheme: ButtonTextTheme.normal, onPressed: () => Toast.show('OutlineButton', context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM))
OutlineButton(child: Text('O.primary'), textTheme: ButtonTextTheme.primary, onPressed: () => Toast.show('OutlineButton', context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM))
OutlineButton(child: Text('O.accent'), textTheme: ButtonTextTheme.accent, onPressed: () => Toast.show('OutlineButton', context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM))
Copy the code

  1. TextColor is the color of the element in the child Widget, not just the textColor; DisabledTextColor is the unclickable child Widget element color; SplashColor is the color of the water ripple when clicked;
RaisedButton(child: Row(mainAxisSize: mainAxisSize. Min, children: <Widget>) [Padding(child: Icon(Icons. Ac_unit), padding: EdgeInsets. Only (Right: 10.0)), Text('RaisedButton')]), textColor: Colors.deepPurple, onPressed: () => {}) FlatButton(child: Row(mainAxisSize: MainAxisSize.min, children: <Widget>[Padding(child: Icon(Icons. Ac_unit), Padding: EdgeInsets. Only (right: 10.0)), Text('FlatButton')]), textColor: Color.deeppurple, onPressed: () => {}) // Unpressed RaisedButton(Child: Row(mainAxisSize: mainAxisSize. Min, children: <Widget>[ Padding(child: Icon(Icons.ac_unit), padding: EdgeInsets.only(right: ), Text('RaisedButton')]), textColor: color.deeppurple, onPressed: null) FlatButton(Child: Row(mainAxisSize: MainAxisSize.min, children: <Widget>[ Padding(child: Icon(Icons.ac_unit), padding: EdgeInsets.only(right: Text('FlatButton')]), textColor: color.deeppurple, onPressed: null)Copy the code

  1. Color = Button background color; HighlightColor highlights the background color when clicked; DisabledColor is the unclickable background color;
RaisedButton(child: Text('RaisedButton'), onPressed: () => {}, color: Colors. Green. WithOpacity (0.4), highlightColor: Colors. The purple. WithOpacity (0.4), splashColor: Colors. Yellow. WithOpacity (0.7)) FlatButton (child: Text (' FlatButton), onPressed: () = > {}, color: Colors. Green. WithOpacity (0.4), highlightColor: Colors. The purple. WithOpacity (0.4), splashColor: Colors. Yellow. WithOpacity (0.7)) / / not click RaisedButton (child: Text (' RaisedButton), onPressed: null, disabledColor: Color.red. WithOpacity (0.4)) FlatButton(Child: Text('FlatButton'), onPressed: null, disabledColor: Colors. Red. WithOpacity (0.4),)Copy the code

  1. Shape is Button shape; Since the button does not have the hight property in Material, you need to use padding or outer layer to adjust the button size depending on other widgets.
RaisedButton(Child: Text('RaisedButton'), onPressed: () => {} PADDING: edgeinset.all (16.0), Shape: RoundedRectangleBorder (borderRadius: borderRadius. All (Radius circular (30.0)))) FlatButton (child: Text('FlatButton'), onPressed: () => {} PADDING: EdgeInsets. All (16.0), Shape: rectangleBorder (borderRadius: rectangleBorder) BorderRadius. All (Radius. Circular (30.0))))Copy the code

  1. ColorBrightness represents color contrast. It is usually light or dark. Generally, dark background requires light text contrast, light background requires dark text contrast;
RaisedButton(Child: Text(' r.light '), colorBrightness: Brightness. Light, onPressed: () => {}) RaisedButton(child: Text('R.dark'), colorBrightness: Brightness.dark, onPressed: () => {}) FlatButton(child: Text('F.light'), colorBrightness: Brightness.light, onPressed: () => {}) FlatButton(child: Color: thumbnail. Dark, onPressed: () => {}) // Do not click RaisedButton(child: Text('R.light'), colorBrightness: Brightness.light, onPressed: null) RaisedButton(child: Text('R.dark'), colorBrightness: Brightness.dark, onPressed: null) FlatButton(child: Text('F.light'), colorBrightness: Brightness.light, onPressed: null) FlatButton(child: Text('F.dark'), colorBrightness: Brightness.dark, onPressed: null)Copy the code

  1. RaisedButton/FlatButton both provide a simple way for.icon with an icon. Icon/label are required attributes. Note that RaisedButton has no padding in.icon mode;
RaisedButton.icon(icon: Icon(Icons.ac_unit), label: Text('RaisedButton'), shape: RoundedRectangleBorder(borderRadius: Borderradius.all (radius.circular (30.0))), onPressed: () => {}) Flatbutton.icon (icon: icon(Icons. Ac_unit), label: Text('FlatButton'), padding: EdgeInsets. All (16.0), Shape: RoundedBorder (borderRadius: rectangleBorder) Borderradius.all (radius.Circular (30.0)), onPressed: () => {})Copy the code

  1. Elevation is RaisedButton’s unique shadow height; HighlightElevation is the height of the shadow when it is highlighted; DisabledColor is the shadow height when it is not clickable;
RaisedButton(Child: Text(' shadow '), elevation: onPressed: () => {}) RaisedButton(Child: Text(' shadow '), elevation: 0.0, highlightElevation: 20.0, onPressed: () => {}) RaisedButton(Child: Text(' shadow '), disabledElevation: 20.0, onPressed: null)Copy the code

OutlineButton

Source code analysis
Const OutlineButton({Key Key, @required VoidCallback onPressed, ButtonTextTheme textTheme, // // text Color Color disabledTextColor, // unclickable text Color Color, // button background Color highlightColor, // highlightColor Color splashColor, / color/water ripple double highlightElevation, / / position is shadow height enclosing borderSide, / / border style enclosing disabledBorderColor, / / do not click on the border color enclosing highlightedBorderColor, / / position border color EdgeInsetsGeometry padding, / / content around margin ShapeBorder shape, Clip clipBehavior = Clip.None, // Widget child,})Copy the code

The OutlineButton is slightly different from the other two buttons in that it emphasizes the border style attribute and lacks the tooltip attribute.

Case try
  1. For starters, try a basic OutlineButton. Long press no reminder;
OutlineButton(child: Text('OutlineButton'), onPressed: () => Toast.show('OutlineButton', context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM))
Copy the code

  1. Small dishes try to use the same button properties as other buttons in the same way;
OutlineButton( child: Row(mainAxisSize: MainAxisSize.min, children: <Widget>[ Padding(child: Icon(Icons. Ac_unit), padding: EdgeInsets. Only (Right: 10.0)), Text('OutlineButton')]), textColor: Color: color.pink, disabledTextColor: color.green, padding: EdgeInsets. All (20.0), color: Colors. BlueAccent. WithOpacity (0.2), highlightColor: Colors. Amber, borderSide: borderSide (width: 4.0), highlightedBorderColor: Colors. Brown, disabledBorderColor: Colors. GreenAccent, Shape: RoundedRectangleBorder(borderRadius: Borderradio.all (radio.circular (50.0))), clipBehavior: Clip.None, onPressed: () => Toast.show('OutlineButton', context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM))Copy the code

  1. The following attributes are specific to OutlineButton: borderSide represents the border style; DisabledBorderColor represents the border color when not clickable; HighlightedBorderColor represents the border color when highlighted; BorderSide can set the border color width and style (solid/None);
OutlineButton(child: Text('OutlineButton'), borderSide: borderSide (width: 4.0, color: Colors. BorderStyle.solid), highlightedBorderColor: Colors.teal, onPressed: () => Toast.show('OutlineButton', context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM)) OutlineButton(child: Text('OutlineButton'), borderSide: borderSide (width: 4.0, color: Colors. BorderStyle.solid), disabledBorderColor: Colors.redAccent, onPressed: null)Copy the code

  1. OutlineButton also provides a simple way for.icon to be tagged with an icon. The icon/label attributes are required;
OutlineButton.icon( icon: Icon(Icons.ac_unit), label: Text('OutlineButton'), textColor: Colors.pink, disabledTextColor: Colors. Green, padding: EdgeInsets. All (20.0), color: Colors. BlueAccent. WithOpacity (0.2), highlightColor: Colors. Amber, borderSide: borderSide (width: 4.0), highlightedBorderColor: Colors. Brown, disabledBorderColor: Colors. GreenAccent, Shape: Round RectangleBorder(borderRadius: borderRadius. All (Radius. Circular (50.0))), clipBehavior: Clip.none, onPressed: () => Toast.show('OutlineButton', context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM))Copy the code

extension

1. What does textColor do?

The child element of the button is a Widget. You can set various effects freely. Will the separate textColor be slightly redundant? But that’s not the case. TextColor doesn’t work when the child element sets the color and so on; But textColor is related to the topic; Side dishes to OutlineButton as an example, at a glance;

// Text set the color OutlineButton(child: Text('OutlineButton', style: TextStyle(color: color.deeppurple)), onPressed: () => Toast.show('OutlineButton', context, duration: Toast.LENGTH_SHORT, gravity: Toasts.BOTTOM)) // textColor Set color OutlineButton(Child: Text('OutlineButton'), textColor: colors.deeppurple, onPressed: () => Toast.show('OutlineButton', context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM))Copy the code

2. How to change the color of shadow?

RaisedButton comes with a shadow effect. The height of the shadow and the height of the shadow when in highlight can be set freely. However, how to deal with the color of the shadow? There is no official shadow effect attribute; RaisedButton’s outer layer relies on a Container with a fuzzy shadow effect. The side dishes are borrowed and adjusted slightly, the solution is not the best, just try;

Initially define a default height as the shadow height. Listen for the button’s onHighlightChanged method to change the height as the shadow height for the highlight.

Suggestion: a. Set highlightElevation to 0.0 when using a highlight color. B. If the Container is configured with a style, set the Container to the same Shape style.

Var height = 5.0; Container(decoration: BoxDecoration(borderRadius: borderRadius. Circular (30.0), boxShadow: <BoxShadow>[BoxShadow(color: color.red. WithOpacity (0.2), blurRadius: hight, offset: offset (0, hight))]), child: RaisedButton(Child: Text('RaisedButton'), padding: EdgeInsets. Symmetric (vertical: 15.0), highlightElevation: 0.0, onHighlightChanged: (state) {setState(() {hight = (state)? 20.0, 5.0; }); }, Shape: RoundedRectangleBorder(borderRadius: borderRadius. Circular (30.0)), onPressed: () => {})Copy the code

Xiao CAI’s basic learning of Button is over for now, there are still some remaining problems to be studied, if there are mistakes, please give more guidance!

Source: Little Monk A Ce