This is the 23rd day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Dishes before tried ToggleButtons button switch container group, side dishes learned that similar style of iOS CupertinoSegmentedControl piecewise controller; In the daily application of high frequency, today’s simple dishes to learn;

CupertinoSegmentedControl

Source code analysis

CupertinoSegmentedControl ({Key Key, @ required this. Children, @ required enclosing onValueChanged, / / state change callback enclosing groupValue, UnselectedColor this. SelectedColor, // Select the area color this.borderColor, // Select the area color this.pressedColor, This.padding, // margin})Copy the code

Simple analysis of the source code, the whole CupertinoSegmentedControl controller properties is very clear, is also very simple to use;

Symmetric (horizontal: 16.0); Symmetric (horizontal: 16.0); Symmetric (horizontal: 16.0); Const double _kMinSegmentedControlHeight = 28.0; const Duration _kFadeDuration = Duration(milliseconds: 165);Copy the code

The default margin value set by the controller, the minimum height and the color switching time when clicking can be learned from the constant. The background color is switched by ColorTween animation;

class _SegmentedControlContainerBoxParentData extends ContainerBoxParentData<RenderBox> { RRect surroundingRect; } RRect rChildRect; if (child == leftChild) { rChildRect = RRect.fromRectAndCorners(childRect, topLeft: Circular (3.0), bottomLeft: const Radius. Circular (3.0)); } else if (child == rightChild) { rChildRect = RRect.fromRectAndCorners(childRect, topRight: Circular (3.0), bottomRight: const Radius. Circular (3.0)); } else { rChildRect = RRect.fromRectAndCorners(childRect); }Copy the code

The drawing of the border inherits ContainerBoxParentData and sets the maximum width and height of the Widget. By using RRect double-layer rounded rectangle to draw borders, xiao CAI also learned fromRectAndCorners to draw partial rounded corners. The use of click-to-switch GestureDetector between multiple widgets is also worth learning;

Case try

The small dish realizes a basic segmental controller first, and then gradually adds each attribute to understand;

1. children & onValueChanged

Children and onValueChanged are two required properties that correspond to an array of child Widgets and a listener for the state change callback, respectively; OnValueChanged cannot be empty; Children is the LinkedHashMap type, and each key-value cannot be empty. If the key is the same, the subsequent key-value pair overwrites the previous duplicate key-value pair. Key is a T generic type and does not restrict the specific type; Children length >=2;

Var mixMap = {' aircraft ': Padding(Padding: EdgeInsets. Symmetric (vertical: 10.0), child: Icon(Icons. Airplanemode_active)), 'bus ': Padding(Padding: EdgeInsets. Symmetric (vertical: 10.0), child: }}}}}}}}}}}}}}}}}}}}}}}}}}} Icon(Icons.directions_bike)) }; Var _currentIndexStr = 'plane '; _segmentedWid01() => Container( child: CupertinoSegmentedControl( children: mixMap, onValueChanged: (index) { print('index -> $index'); setState(() => _currentIndexStr = index); }));Copy the code

2. groupValue

GroupValue corresponds to the selected status. If this parameter is not set, only the callback method can be listened to during controller switchover, but the callback method will not be changed.

_segmentedWid02() => Container(
    child: CupertinoSegmentedControl(
        children: mixMap,
        onValueChanged: (index) {
          print('index -> $index');
          setState(() => _currentIndexStr = index);
        },
        groupValue: _currentIndexStr));
Copy the code

3. unselectedColor

UnselectedColor corresponding uncheck switching area background color, the default is CupertinoTheme primaryContrastingColor;

_segmentedWid03() => Container( child: CupertinoSegmentedControl( children: mixMap, onValueChanged: (index) { print('index -> $index'); setState(() => _currentIndexStr = index); }, groupValue: _currentIndexStr, unselectedColor: color.black.withopacity (0.2));Copy the code

4. selectedColor

SelectedColor switch corresponding to the selected area background color, the default is CupertinoTheme primaryColor;

_segmentedWid04() => Container( child: CupertinoSegmentedControl( children: mixMap, onValueChanged: (index) { print('index -> $index'); setState(() => _currentIndexStr = index); }, groupValue: _currentIndexStr, unselectedColor: color.black. WithOpacity (0.2), selectedColor: Colors. DeepOrange. WithOpacity (0.4)));Copy the code

5. borderColor

BorderColor corresponding border color, the default is CupertinoTheme primaryColor;

_segmentedWid05() => Container( child: CupertinoSegmentedControl( children: mixMap, onValueChanged: (index) { print('index -> $index'); setState(() => _currentIndexStr = index); }, groupValue: _currentIndexStr, unselectedColor: color.black. WithOpacity (0.2), selectedColor: Colors. DeepOrange. WithOpacity (0.4) and borderColor: Colors. DeepPurple));Copy the code

6. pressedColor

PressedColor for background color when selected, default is selectedColor plus 20% opacity;

_segmentedWid06() => Container( child: CupertinoSegmentedControl( children: mixMap, onValueChanged: (index) { print('index -> $index'); setState(() => _currentIndexStr = index); }, groupValue: _currentIndexStr, unselectedColor: color.black. WithOpacity (0.2), selectedColor: Colors. DeepOrange. WithOpacity (0.4) and borderColor: Colors. DeepPurple, pressedColor: Colors. Green. WithOpacity (0.4)));Copy the code

7. padding

Padding corresponding CupertinoSegmentedControl padding, notice that the padding is the padding of the controller, rather than the padding of child widgets, default is in the horizontal direction, about 16 distance;

_segmentedWid07() => Container( child: CupertinoSegmentedControl( children: mixMap, onValueChanged: (index) { print('index -> $index'); setState(() => _currentIndexStr = index); }, groupValue: _currentIndexStr, unselectedColor: color.black. WithOpacity (0.2), selectedColor: Colors. DeepOrange. WithOpacity (0.4) and borderColor: Colors. DeepPurple, pressedColor: Colors. Green. WithOpacity (0.4), the padding: EdgeInsets. All (30.0)));Copy the code

CupertinoSegmentedControl case source

CupertinoSegmentedControl on iOS devices support click and slide switch, but side dishes to try on the Android side mainly click switch; Xiao CAI for the source of reading is very shallow, if there are mistakes, please guide!

Source: Little Monk A Ce