Xiaocai just learned ButtonBar container two days ago. Today, I will learn ToggleButtons to switch container group. The switching effect can be applied to daily TabBar switching position.

ToggleButtons

Source code analysis

const ToggleButtons({ Key key, @required this.children, @required this.isSelected, this.onPressed, // this. MouseCursor, this.textStyle, // textStyle this.constraints, // this. // unselected color this.selectedColor, // select color this.disabledColor, // unselected color this.fillColor, // fillColor this.focusColor, This. HighlightColor, // Highlight this. HoverColor when selected, // Initial water ripple color this.splashColor, // Water ripple color this.focusNodes, / / accept corresponding to each switch button focus list enclosing renderBorder = true, / / draw frame enclosing borderColor, / / uncheck border color enclosing selectedBorderColor, / / select the border color enclosing disabledBorderColor, / / not selected border color enclosing borderRadius, / / frame corner radian enclosing borderWidth, / / border width})Copy the code

ToggleButtons are a set of horizontal toggle button containers, whose children, Widgets, are arranged by Row. Children and isSelected are mandatory attributes, and their array lengths must be the same.

Case try

1. children & isSelected

The children button states are isSelected and unselected. The two arrays are of the same length and cannot be empty;

_toggleWid01(index) { var childList; if (index == 0) { childList = iconList; } else if (index == 1) { childList = textList; } else { childList = minxList; } return Container(height: 80.0, child: Center(child: ToggleButtons(children: childList, isSelected: stateList)); }Copy the code

2. color & selectedColor & disabledColor

Color corresponds to the default unselected status color of the child widgets; SelectedColor corresponds to the default selected status color of the child widgets; DisabledColor Indicates the default unselected status color of the child Widget. Unchecked if onPressed is not set or onPressed == NULL;

_toggleWid02(index, isPressed) {return Container(height: 80.0, child: Center(child: ToggleButtons(children: _getChildList(index), isSelected: stateList, color: color.grey.withopacity (0.4), selectedColor: Colors. DeepOrange. WithOpacity (0.4), disabledColor: Colors. DeepPurple. WithOpacity (0.4), onPressed: isPressed ? (selectedIndex) => setState(() => stateList[selectedIndex] = ! stateList[selectedIndex]) : null))); }Copy the code

3. fillColor & highlightColor & splashColor

FillColor corresponds to the default fillColor of the child widgets; HighlightColor corresponds to the highlightColor of the child Widget when selected under gesture operations. SplashColor corresponds to the water ripple color of the child Widget during clicking;

_toggleWid03(index, isPressed) {return Container(height: 80.0, child: Center(child: ToggleButtons(children: _getChildList(index), isSelected: stateList, fillColor: color.grey.withopacity (0.4), highlightColor: Colors. DeepOrange. WithOpacity (0.4), splashColor: Colors. DeepPurple. WithOpacity (0.4), onPressed: isPressed ? (selectedIndex) => setState(() => stateList[selectedIndex] = ! stateList[selectedIndex]) : null))); }Copy the code

4. borderColor & selectedBorderColor & disabledBorderColor

BorderColor corresponds to the borderColor when the child widgets are not selected; SelectedBorderColor corresponds to the border color when the child Widget is selected; DisabledBorderColor corresponds to the non-selectable border color;

_toggleWid04(index, isPressed) {return Container(height: 80.0, child: Center(child: ToggleButtons(children: _getChildList(index), isSelected: stateList, borderColor: color.blue. WithOpacity (0.4), selectedBorderColor: Colors. DeepOrange. WithOpacity (0.4), disabledBorderColor: Colors. DeepPurple. WithOpacity (0.4), onPressed: isPressed ? (selectedIndex) => setState(() => stateList[selectedIndex] = ! stateList[selectedIndex]) : null)));Copy the code

5. borderRadius & borderWidth

BorderRadius corresponds to the rounded corner radian of the child Widget border; BorderWidth corresponds to the child Widget borderWidth, which is 1.0 by default;

BorderWidth: 1.0, borderRadius: Borderradius. all(radius.circular (40.0)), borderWidth: 2.0, borderRadius: BorderRadius. Only (topLeft: the Radius circular (25.0), bottomRight: the Radius. The circular (25.0)),Copy the code

6. renderBorder

RenderBorder is used to draw borders or not. Default is true; If false, no border is drawn;

_toggleWid06(index, isPressed, isBorder) {return Container(height: 80.0, child: Center(child: ToggleButtons( children: _getChildList(index), isSelected: stateList, renderBorder: isBorder, borderWidth: BorderRadius: BorderRadius.only(topLeft: radius.circular (25.0), bottomRight: radius.circular (25.0)), borderColor: Colors. Blue. WithOpacity (0.4), selectedBorderColor: Colors. DeepOrange. WithOpacity (0.4), disabledBorderColor: Colors. DeepPurple. WithOpacity (0.4), onPressed: isPressed ? (selectedIndex) => setState(() => stateList[selectedIndex] = ! stateList[selectedIndex]) : null))); }Copy the code

7. constraints

Constraints is used to limit the size of the child Widget. BoxConstraints limits the maximum and minimum size of the child Widget, which is 48.0 by default.

_toggleWid07(size) { return Container(child: Center( child: ToggleButtons( children: [ Image(image: AssetImage('images/icon_hzw01.jpg'), fit: BoxFit.cover, width: size, height: size), Image(image: AssetImage('images/icon_hzw02.jpg'), fit: BoxFit.cover, width: size, height: size), Image(image: AssetImage('images/icon_hzw03.jpg'), fit: BoxFit.cover, width: size, height: size) ], isSelected: StateList, borderRadius: borderRadius. Only (topLeft: Radius. Circular (25.0), bottomRight: Radius. Circular (25.0)), constraints: BoxConstraints(minWidth: 70.0, minHeight: 70.0), borderWidth: 2.0, onPressed: (selectedIndex) => setState(() => stateList[selectedIndex] = ! stateList[selectedIndex]))));Copy the code

8. focusNodes

FocusNodes is used to accept the List of focusNodes corresponding to each switch button, and focus is used to determine which sub-widgets should be affected by keyboard events. If focusNodes is set, its array length should be the same as the length of the sub-widgets. Commonly used for external equipment operation;

focusWid() {
  return Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
    RaisedButton(
        child: Text('Previous'),
        onPressed: () {
          if (_index > iconList.length || _index <= 0) {
            _index = 0;
          } else {
            _index -= 1;
          }
          _requestFocus();
        }),
    SizedBox(width: 20),
    RaisedButton(
        child: Text('Next'),
        onPressed: () {
          if (_index >= iconList.length || _index < 0) {
            _index = iconList.length - 1;
          } else {
            _index += 1;
          }
          _requestFocus();
        })
  ]);
}
Copy the code

ToggleButtons case source code

ToggleButtons is very convenient to use. The main purpose of the tip is to learn the overall idea of ToggleButtons, including setting rounded corners or borders, and trimming internal widgets to help customize widgets. If there are mistakes, please give more guidance!

Source: Little Monk A Ce