1.ChoiceChip

ChoiceChip select control, you can achieve radio effect

Let’s look at the corresponding properties

Const ChoiceChip({Key Key, this.avatar, // left Widget general small icon @required this.label, // label text this.labelStyle, This.labelpadding, this.onselected, this.presselevation, @required this.selected, // Tooltip, this.shape, // Shape defaults to semicircles this.clipBehavior = Clip.None, Enclosing backgroundColor, / / the background color. This padding, / / set to MaterialTapTargetSize. / / when the shrinkWrap, clip distance from the top to 0; Set to MaterialTapTarget / / Size. Padded this. There is a distance from the top when materialTapTargetSize, enclosing elevation, Enclosing shadowColor, / / shadow background color enclosing selectedShadowColor, / / selected background this. The shadows of avatarBorder = const CircleBorder ()})Copy the code

By default, the ChoiceChip option mainly changes the background color and the corresponding text,

2. Encapsulate code

MultiNormalSelectChip encapsulation ChoiceChip completes tag selection

// provide tag basic class abstract Class BaseSelectEntity{String getTag(); } class MultiNormalSelectChip<T extends BaseSelectEntity> extends StatefulWidget {/// The list final list <T> dataList; // Final list <T> selectList; Final Function(List<T>) onSelectionChanged; MultiNormalSelectChip(this.dataList, {this.selectList, this.onSelectionChanged}); @override _MultiNormalSelectChipState createState() => _MultiNormalSelectChipState(selectList); } class _MultiNormalSelectChipState<T extends BaseSelectEntity> extends State<MultiNormalSelectChip> { List<T> selectList; _MultiNormalSelectChipState(this.selectList);_buildChoiceList() { List<Widget> choices = List(); widget.dataList.forEach((item) { choices.add(Container( height: 31, padding: EdgeInsets.all(4), child: ChoiceChip( label: Text( item.getTag(), style: TextStyle(fontSize: 14), ), selected: selectList.contains(item), materialTapTargetSize: MaterialTapTargetSize.padded, labelPadding: EdgeInsets.only(bottom: 9), padding: EdgeInsets.only(left: 12, right: 12, bottom: 9), selectedColor: Colors.white, backgroundColor: Colors.blue, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(12), side: BorderSide(color: Color. Black, width: 0.5),), onSelected: (selected) {setState(() { selectList.contains(item) ? selectList.remove(item) : selectList.add(item); widget.onSelectionChanged(selectList); }); },),)); });return choices;
  }

  @override
  Widget build(BuildContext context) {
    returnWrap( alignment: WrapAlignment.end, children: _buildChoiceList(), ); }}Copy the code

Define a basic entity class, BaseSelectEntity, which provides a getTag method to return the label of the label. Then, according to the passed list, the corresponding choiceChip can be generated to complete the label selection. We then use the onSelected callback to set the selected item to the selectList with the following effect:

3. Modify the original ChoiceChip

In this case, you need to modify the ChoiceChip source code to add the selectShape property

BorderChoiceChip( label: Text( item.getTag(), style: TextStyle(fontSize: 14), ), selected: selectList.contains(item), materialTapTargetSize: MaterialTapTargetSize.padded, labelPadding: EdgeInsets.only(bottom: 9), padding: EdgeInsets.only(left: 12, right: 12, bottom: 9), selectedColor: Colors.white, backgroundColor: Colors. White, // Change the rectangleBorder selectShape: round (borderRadius: borderRadius. Circular (12), side: BorderSide(color: Colors. Blue, width: 0.5), Shape: Round Rectangleborder (borderRadius: BorderRadius. Circular (12), side: BorderSide(color: color.black, width: 0.5),), onSelected: (selected) {setState(() {
              selectList.contains(item)
                  ? selectList.remove(item)
                  : selectList.add(item);
              widget.onSelectionChanged(selectList);
            });
          },
Copy the code

This can achieve the corresponding requirements, the effect is as follows

For specific code, see demo