Shulou(Shulou.com)06/02 Report--

This article mainly explains the "Flutter built-in several Button controls", the article explains the content is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in-depth, together to study and learn "Flutter built-in several Button controls" bar!

RaisedButton

RaisedButton is a material-style "raised" button, the basic usage:

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

Effect:

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

OnHighlightChanged is the highlight change callback, which is highlighted when pressed and not highlighted when lifted. The usage is as follows:

RaisedButton (onHighlightChanged: (high) {},...)

Buttons can set fonts and various state colors, which can be summarized as follows:

Property description textColor font color disabledTextColor disabled font color color background color disabledColor disabled background color highlightColor highlight color, press the color splashColor water ripple color, press release will have water ripple effect

Take textColor as an example, the usage is as follows:

RaisedButton (textColor: Colors.red,...)

You can also set font styles through textTheme, using the following:

RaisedButton (textTheme: ButtonTextTheme.primary,...)

The values of ButtonTextTheme are described as follows:

Normal: black or white font, dependent on ThemeData.brightness

Accent: font color depends on ThemeData.accentColor

Primary: font color depends on ThemeData.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),...)

Set button shadows, highlight shadows, and disable shadows, using the following:

RaisedButton (elevation: 5. 0, highlightElevation: 5. 0, disabledElevation: 5. 0,...)

Shape sets the shape of the button, such as a circle, with the following code:

RaisedButton (shape: CircleBorder (),...)

The effect is as follows:

The attribute related to hover refers to the state when the mouse is hovering, the mobile end has no effect, and the attribute related to focus is the state when the focus is obtained.

FlatButton

FlatButton is a flat button that is used in the same way as RaisedButton with the following code:

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

The effect is as follows:

OutlineButton

OutlineButton is a button with a border, using the same as RaisedButton, and the code is as follows:

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

The effect is as follows:

Set the border style as follows:

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

The effect is as follows:

DropdownButton

DropdownButton selects a button for the drop-down. The basic usage is as follows:

Var _ dropValue = 'Chinese' _ buildButton () {return DropdownButton (value: _ dropValue, items: [DropdownMenuItem (child: Text ('language'), value: 'Chinese',), DropdownMenuItem (child: Text ('Mathematics'), value: 'Mathematics'), DropdownMenuItem (child: Text ('English'), value: 'English'),], onChanged: (value) {setState (() {_ dropValue = value) });},);}

Items is a pop-up option when clicked, and callback when the onChanged 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)];},...)

The components returned by selectedItemBuilder should correspond to each other in items. The selected styles are as follows:

When the user is unchecked, the value is null and the 'Please check' is displayed. The usage is as follows:

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

The effect is as follows:

By default, the icon of the drop-down option is a handstand triangle, which can also be customized as follows:

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

The effect is as follows:

RawMaterialButton

RawMaterialButton is a component based on Semantics, Material and InkWell. It does not use the current system theme and button theme, and is used to customize buttons or merge existing styles. Both RaisedButton and FlatButton configure system theme and button theme based on RawMaterialButton. For related properties, please refer to RaisedButton. The parameters are basically the same, and the basic usage is as follows:

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

The effect is as follows:

PopupMenuButton

PopupMenuButton is a menu selection control, and its usage is as follows:

PopupMenuButton (itemBuilder: (context) {return [PopupMenuItem (value: 'Chinese', child: Text ('Chinese'), PopupMenuItem (value: 'mathematics', child: Text ('mathematics'), PopupMenuItem (value: 'English', child: Text ('English')) PopupMenuItem (value: 'biology', child: Text ('biology'), PopupMenuItem (value: 'chemistry', child: Text),)] },)

The effect is as follows:

Set its initial value:

PopupMenuButton (initialValue: 'Chinese',...)

After setting the initial value, when the menu is opened, the set value will be highlighted, and the effect is as follows:

Get the value of an item selected by the user, or not selected by the user. The code is as follows:

PopupMenuButton (onSelected: (value) {print ('$value');}, onCanceled: () {print ('onCanceled');},...)

Tooltip is a prompt that pops up on time. The usage is as follows:

PopupMenuButton (tooltip: 'PopupMenuButton',...)

The effect is as follows:

Set its shadow value, inner margin, and background color of the pop-up menu:

PopupMenuButton (elevation: 5, padding: EdgeInsets.all (5), color: Colors.red,...)

By default, PopupMenuButton displays three small dots, or we can set them in alignment with the following text:

PopupMenuButton (child: Text),...

The child component will be wrapped by InkWell. Click the pop-up menu, and the effect is as follows:

You can also set other icons:

PopupMenuButton (icon: Icon (Icons.add),...)

The effect is as follows:

Set the pop-up menu border:

PopupMenuButton (shape: RoundedRectangleBorder (side: BorderSide (color: Colors.red), borderRadius: BorderRadius.circular (10)),...)

The effect is as follows:

IconButton

IconButton is a butcon, and its usage is as follows:

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

Set prompt properties:

IconButton (tooltip: 'this is a butcon', icon: Icon (Icons.person), iconSize: 30, color: Colors.red, onPressed: () {},)

When the manager displays the prompt on time, the effect is as follows:

BackButton

BackButton is a material-style return button, which itself is an IconButton. When clicked, Navigator.maybePop is executed by default, that is, if the routing stack has a previous page, it returns to the previous page.

BackButton ()

The icons displayed on Android and IOS platforms are different, and the ios effect is as follows:

The effect of Android is as follows:

CloseButton

CloseButton is a material-style close button, which itself is an IconButton. When clicked, Navigator.maybePop is executed by default, that is, if the routing stack has a previous page, it returns to the previous page.

Unlike BackButton scenarios, BackButton is suitable for full-screen pages, while CloseButton is suitable for pop-up Dialog.

The usage is as follows:

CloseButton ()

The effect is as follows:

ButtonBar

ButtonBar is not a single button control, but a container control aligned at the end, and when there is not enough space in the horizontal direction, the buttons are arranged vertically as a whole instead of wrapping. The basic usage is as follows:

ButtonBar (children: [RaisedButton (),],)

The effect is as follows:

Set the alignment and size of the spindle:

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

The effect is as follows:

ToggleButtons

ToggleButtons components combine multiple components and let users choose from them. The basic usage of ToggleButtons is as follows:

List _ selecteds = [false, false, true]; ToggleButtons (isSelected: _ selecteds, children: [Icon (Icons.local_cafe), Icon (Icons.fastfood), Icon (Icons.cake),], onPressed: (index) {setState (()

The isSelected attribute is a collection of bool types, and the number is the same as the number of children. OnPressed is a click callback, and you will have a good switch button line. The effect is as follows:

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

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

The effect is as follows:

FillColor is the background color of the selected button.

If you don't need a border, you can set renderBorder to false:

ToggleButtons (renderBorder: false,)

The effect is as follows:

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

ToggleButtons (borderRadius: BorderRadius.circular (30), borderColor: Colors.orange, borderWidth: 3, selectedBorderColor: Colors.deepOrange,)

The effect is as follows:

You can even set the ripple color (splashColor) and the highlight color (highlightColor) when you click:

ToggleButtons (splashColor: Colors.purple, highlightColor: Colors.yellow,)

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, disabledBorderColor: Colors.blueGrey,)

The effect is as follows:

If you are developing a web program, we can set the mouse over color:

ToggleButtons (hoverColor: Colors.cyan,) Thank you for your reading, these are the contents of "several Button controls built in Flutter". After the study of this article, I believe you have a deeper understanding of the problem of several Button controls built in Flutter, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.