Note: The Flutter and Dart versions are as follows without special instructions:

  • Flutter version: 1.12.13+ Hotfix.5
  • Dart version: 2.7.0

Flutter has more than 10 button-like controls built into it. Knowing about them helps speed up development.

RaisedButton

RaisedButton is a material style “raised” button.

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

Effect:

When onPressed is null or not set, the button is disabled.

OnHighlightChanged is a highlight change callback that is highlighted when pressed and unhighlighted when lifted. It can be used as follows:

RaisedButton(
  onHighlightChanged: (high){
  },
  ...
)
Copy the code

Button can set font and various state colors, summarized as follows:

attribute instructions
textColor The font color
disabledTextColor Font color is disabled
color The background color
disabledColor Background color in disabled state
highlightColor Highlight color, color when pressed
splashColor Water ripple color, press to release the water ripple effect

TextColor, for example, is used as follows:

RaisedButton(
  textColor: Colors.red,
  ...
)
Copy the code

You can also set the font style using textTheme as follows:

RaisedButton(
  textTheme: ButtonTextTheme.primary,
  ...
)
Copy the code

The value of ButtonTextTheme is described as follows:

  • Normal: black or white font, depending onThemeData.brightness
  • Accent: Font color depends onThemeData.accentColor
  • Primary: The font color depends onThemeData.primaryColor

These three values are set globally in the MaterialApp control as follows:

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primaryColor: Color(0xFF42A5F5),
    accentColor: Colors.yellow,
    brightness: Brightness.light
  ),
  ...
)
Copy the code

To set button shadow, highlight Shadow, disable shadow, use the following:

RaisedButton(
  elevation: 5.0,
  highlightElevation: 5.0,
  disabledElevation: 5.0,...).Copy the code

Shape Sets the shape of the button, such as a circle, as follows:

RaisedButton(
  shape: CircleBorder(),
  ...
)
Copy the code

The effect is as follows:

The attribute related to hover refers to the state when the mouse is hovering, while the mobile terminal has no effect. The attribute related to focus refers to the state when the focus is acquired.

FlatButton

FlatButton is a FlatButton that is used in the same way as RaisedButton. The code is as follows:

FlatButton(
  child: Text('Button'),
  color: Colors.blue,
  onPressed: () {},
)
Copy the code

The effect is as follows:

OutlineButton

OutlineButton is a border button, used in the same way as RaisedButton, with the following code:

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

The effect is as follows:

Set its border style as follows:

OutlineButton(
  borderSide: BorderSide(color: Colors.blue,width: 2),
  disabledBorderColor: Colors.black,
  highlightedBorderColor: Colors.red,
  child: Text('Button'),
  onPressed: () {},
)
Copy the code

The effect is as follows:

DropdownButton

DropdownButton is a drop-down selection button.

var _dropValue = 'Chinese';

_buildButton() {
  return DropdownButton(
    value: _dropValue,
    items: [
      DropdownMenuItem(child: Text('Chinese'),value: 'Chinese',),
      DropdownMenuItem(child: Text('mathematics'),value: 'mathematics'),
      DropdownMenuItem(child: Text('English'),value: 'English'), ], onChanged: (value){ setState(() { _dropValue = value; }); }); }Copy the code

Items is an option that pops up when clicked, and onChanged is a callback when the option changes. The effect is as follows:

If you are not satisfied with the style of the selected option, you can customize it as follows:

DropdownButton(
  selectedItemBuilder: (context){
    return [
      Text('Chinese',style: TextStyle(color: Colors.red),),
      Text('mathematics',style: TextStyle(color: Colors.red),),
      Text('English',style: TextStyle(color: Colors.red),) ]; },...).Copy the code

The component returned from selectedItemBuilder should correspond to one of the items selected as follows:

If the user is not selected, that is, value is null, “please select” is displayed, as follows:

DropdownButton(
  hint: Text('Please select'),
  value: null,...).Copy the code

The effect is as follows:

By default, the drop-down icon is an inverted triangle, which can be customized as follows:

DropdownButton(
  icon: Icon(Icons.add),
  iconSize: 24,
  iconDisabledColor: Colors.red,
  iconEnabledColor: Colors.red,
  ...
)
Copy the code

The effect is as follows:

RawMaterialButton

RawMaterialButton RawMaterialButton is a component created based on Semantics, Material, and InkWell. It does not use the current system theme or button theme, and is used to customize buttons or merge existing styles. RaisedButton and FlatButton are both configured with system theme and button theme based on RawMaterialButton. Related attributes can be referred to RaisedButton. Parameters are basically the same, and the basic usage is as follows:

RawMaterialButton(
  onPressed: (){},
  fillColor: Colors.blue,
  child: Text('Button'),Copy the code

The effect is as follows:

PopupMenuButton

PopupMenuButton PopupMenuButton is a menu selected control that can be used as follows:

PopupMenuButton<String>(
  itemBuilder: (context) {
    return <PopupMenuEntry<String>>[
      PopupMenuItem<String>(
        value: 'Chinese',
        child: Text('Chinese'),
      ),
      PopupMenuItem<String>(
        value: 'mathematics',
        child: Text('mathematics'),
      ),
      PopupMenuItem<String>(
        value: 'English',
        child: Text('English'),
      ),
      PopupMenuItem<String>(
        value: 'biological',
        child: Text('biological'),
      ),
      PopupMenuItem<String>(
        value: 'chemistry',
        child: Text('chemistry'),)]; },)Copy the code

The effect is as follows:

Set its initial value:

PopupMenuButton<String>(
  initialValue: 'Chinese',...).Copy the code

After setting the initial value, open the menu and the value will be highlighted as follows:

Gets the value of an item selected by the user, or not selected by the user, as follows:

PopupMenuButton<String>(
  onSelected: (value){
    print('$value');
  },
  onCanceled: (){
    print('onCanceled'); },...).Copy the code

Tooltip is a persistent prompt that can be used as follows:

PopupMenuButton<String>(
  tooltip: 'PopupMenuButton',
  ...
)
Copy the code

The effect is as follows:

Set its shadow value, inner margin, and popup menu background color:

PopupMenuButton<String>(
  elevation: 5,
  padding: EdgeInsets.all(5),
  color: Colors.red,
  ...
)
Copy the code

By default, PopupMenuButton displays 3 dots, which can also be aligned, with the following text:

PopupMenuButton<String>(
  child: Text('discipline'),...).Copy the code

The Child component will be wrapped by InkWell. Click on the popup menu and it will look like this:

You can also set other ICONS:

PopupMenuButton<String>(
	icon: Icon(Icons.add),
	...
)
Copy the code

The effect is as follows:

Set the popup menu border:

PopupMenuButton<String>(
  shape: RoundedRectangleBorder(
    side: BorderSide(
      color: Colors.red
    ),
    borderRadius: BorderRadius.circular(10)),...).Copy the code

The effect is as follows:

IconButton

IconButton is an IconButton and can be used as follows:

IconButton(
  icon: Icon(Icons.person),
  iconSize: 30,
  color: Colors.red,
  onPressed: () {},
)
Copy the code

Set prompt properties:

IconButton(
  tooltip: 'This is an icon button.',
  icon: Icon(Icons.person),
  iconSize: 30,
  color: Colors.red,
  onPressed: () {},
)
Copy the code

When the prompt is displayed for a long time, the effect is as follows:

BackButton

BackButton is a material style BackButton, which is itself an IconButton. When clicked, it defaults to Navigator. MaybePop, which returns to the previous page if there is one in the routing stack.

BackButton()
Copy the code

The ICONS displayed on Android and IOS are different. The IOS ICONS look like this:

Android looks like this:

CloseButton

CloseButton is a material style CloseButton, which is itself an IconButton. When clicked, the default execution is Navigator. MaybePop, which returns to the previous page if there is one in the routing stack.

Unlike BackButton, which works for full-screen pages, CloseButton works for pop-up dialogs.

Usage:

CloseButton()
Copy the code

The effect is as follows:

ButtonBar

ButtonBar is not a single button control, but rather an end-aligned container-like control that aligns buttons vertically instead of wrapping them when there is not enough room horizontally. The basic usage is as follows:

ButtonBar(
  children: <Widget>[
    RaisedButton(),
    RaisedButton(),
    RaisedButton(),
    RaisedButton(),
  ],
)
Copy the code

The effect is as follows:

Set the spindle alignment and spindle size:

ButtonBar(
  alignment: MainAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  ...
)
Copy the code

The effect is as follows:

ToggleButtons

The ToggleButtons component combines multiple components and lets the user select from them. The basic use of ToggleButtons is as follows:

List<bool> _selecteds = [false.false.true]; ToggleButtons( isSelected: _selecteds, children: <Widget>[ Icon(Icons.local_cafe), Icon(Icons.fastfood), Icon(Icons.cake), ], onPressed: (index) { setState(() { _selecteds[index] = ! _selecteds[index]; }); });Copy the code

The isSelected property is a bool set with the same number of children, onPressed is the callback, and the toggle button line looks like this:

We can also customize the appearance, such as setting the color of the button:

ToggleButtons(
      color: Colors.green,
      selectedColor: Colors.orange,
  		fillColor: Colors.red,
      ...
)
Copy the code

The effect is as follows:

FillColor is the background color of the selected button.

If you don’t need borders, you can set renderBorder to false:

ToggleButtons(
	renderBorder: false.)Copy the code

The effect is as follows:

Of course, we can also set the border radius, width, color and so on:

ToggleButtons(
      borderRadius: BorderRadius.circular(30),
      borderColor: Colors.orange,
      borderWidth: 3, selectedBorderColor: Colors. DeepOrange,)Copy the code

The effect is as follows:

You can even set the splashColor when clicked and the highlightColor when pressed:

ToggleButtons(splashColor: Colors. Purple, highlightColor: Colors. Yellow,)Copy the code

The effect is as follows:

If the button is disabled, you can set the color of the button and border in the disabled state:

ToggleButtons(
      onPressed: null,
      disabledColor: Colors.grey[300],
      disabledBorderColor: Colors.blueGrey,
      )
Copy the code

The effect is as follows:

If we are developing a Web application, we can set the mouse hover color:

ToggleButtons(
      hoverColor: Colors.cyan,
      )
Copy the code

communication

Old Meng Flutter blog address (nearly 200 controls usage) : laomengit.com