There are multiple tag controls built into Flutter, but they are essentially the same control with different property parameters. You can put them together to learn and memorize them easily.

RawChip

Material style label control, which is the base class of other label controls. In general, this control is not created directly. Instead, the following controls are used:

  • Chip
  • InputChip
  • ChoiceChip
  • FilterChip
  • ActionChip

Use this control if you want to customize the label class control.

RawChip can be selected by setting onSelected and onDeleted to be deleted, or can be set onPressed to act like a button with a label property and an Avatar and deleteIcon.

The basic usage is as follows:

RawChip(
  label: Text('the old meng'),Copy the code

The effect is as follows:

Disable state setting:

RawChip(
  label: Text('the old meng'),
  isEnabled: false.)Copy the code

The effect is as follows:

Set the left control, usually an icon:

RawChip(
  avatar: CircleAvatar(
    child: Text('mencius'),
  ),
  label: Text('the old meng'),Copy the code

The effect is as follows:

Set the style and padding of the label:

RawChip(
  label: Text('the old meng'),
  labelStyle: TextStyle(color: Colors.blue),
  labelPadding: EdgeInsets.symmetric(horizontal: 10),Copy the code

The effect is as follows:

Set delete related attributes:

RawChip(
  label: Text('the old meng'),
  onDeleted: (){
    print('onDeleted');
  },
  deleteIcon: Icon(Icons.delete),
  deleteIconColor: Colors.red,
  deleteButtonTooltipMessage: 'delete'.)Copy the code

The effect is as follows:

Click the Delete icon to call back onDeleted.

Set shape, background color and inner margin:

RawChip(
  label: Text('the old meng'),
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
  backgroundColor: Colors.blue,
  padding: EdgeInsets.symmetric(vertical: 10),Copy the code

The effect is as follows:

Set shadow:

RawChip(
  label: Text('the old meng'),
  elevation: 8,
  shadowColor: Colors.blue,
)
Copy the code

The effect is as follows:

The materialTapTargetSize property controls the minimum click area. For details, see: materialTapTargetSize

Set the selected state and color:

bool _selected = false;
RawChip(
  label: Text('the old meng'),
  selected: _selected,
  onSelected: (v){
    setState(() {
      _selected = v;
    });
  },
  selectedColor: Colors.blue,
  selectedShadowColor: Colors.red,
)
Copy the code

The effect is as follows:

Set the “front check box” icon when selected:

RawChip(
  label: Text('the old meng'),
  selected: true,
  showCheckmark: true,
  checkmarkColor: Colors.red,
)
Copy the code

The effect is as follows:

If showCheckmark is false, the front check mark icon is not displayed.

Set click properties:

RawChip(
  label: Text('the old meng'),
  onPressed: (){
    print('onPressed');
  },
  pressElevation: 12.)Copy the code

The effect is as follows:

Click on the water ripple effect.

Chip

Chip is a simple label control that only displays information and removes related properties. It is a simplified version of RawChip and is used in the same way as RawChip. Source code is as follows:

@override
Widget build(BuildContext context) {
  assert(debugCheckHasMaterial(context));
  return RawChip(
    avatar: avatar,
    label: label,
    labelStyle: labelStyle,
    labelPadding: labelPadding,
    deleteIcon: deleteIcon,
    onDeleted: onDeleted,
    deleteIconColor: deleteIconColor,
    deleteButtonTooltipMessage: deleteButtonTooltipMessage,
    tapEnabled: false,
    shape: shape,
    clipBehavior: clipBehavior,
    focusNode: focusNode,
    autofocus: autofocus,
    backgroundColor: backgroundColor,
    padding: padding,
    materialTapTargetSize: materialTapTargetSize,
    elevation: elevation,
    shadowColor: shadowColor,
    isEnabled: true,); }Copy the code

InputChip

To represent a piece of complex information, such as an entity (person, place, or thing) or conversation text in compact form.

InputChip is essentially RawChip and is used in the same way as RawChip. Source code is as follows:

@override
Widget build(BuildContext context) {
  assert(debugCheckHasMaterial(context));
  return RawChip(
    avatar: avatar,
    label: label,
    labelStyle: labelStyle,
    labelPadding: labelPadding,
    deleteIcon: deleteIcon,
    onDeleted: onDeleted,
    deleteIconColor: deleteIconColor,
    deleteButtonTooltipMessage: deleteButtonTooltipMessage,
    onSelected: onSelected,
    onPressed: onPressed,
    pressElevation: pressElevation,
    selected: selected,
    tapEnabled: true, disabledColor: disabledColor, selectedColor: selectedColor, tooltip: tooltip, shape: shape, clipBehavior: clipBehavior, focusNode: focusNode, autofocus: autofocus, backgroundColor: backgroundColor, padding: padding, materialTapTargetSize: materialTapTargetSize, elevation: elevation, shadowColor: shadowColor, selectedShadowColor: selectedShadowColor, showCheckmark: showCheckmark, checkmarkColor: checkmarkColor, isEnabled: isEnabled && (onSelected ! =null|| onDeleted ! =null|| onPressed ! =null),
    avatarBorder: avatarBorder,
  );
}
Copy the code

ChoiceChip

Allows a single selection from a set of options, creating a label similar to a radio button. Essentially, ChoiceChip is also a RawChip, and ChoiceChip itself has no radio properties.

The optional demo is as follows:

int _selectIndex = 0;
Wrap(
  spacing: 15,
  children: List.generate(10, (index) {
    return ChoiceChip(
      label: Text('the old meng$index'), selected: _selectIndex == index, onSelected: (v) { setState(() { _selectIndex = index; }); }); }).toList(), )Copy the code

The effect is as follows:

This control is provided by the common programmer.

FilterChip

A FilterChip can be used as a filter tag, which is essentially a RawChip, as follows:

List<String> _filters = [];

Column(
  children: <Widget>[
    Wrap(
      spacing: 15,
      children: List.generate(10, (index) {
        return FilterChip(
          label: Text('the old meng$index'),
          selected: _filters.contains('$index'),
          onSelected: (v) {
            setState(() {
              if(v){
                _filters.add('$index');
              }else{
                _filters.removeWhere((f){
                  return f == '$index'; }); }}); }); }).toList(), ), Text('selected:${_filters.join(', ')}'),,)Copy the code

The effect is as follows:

ActionChip

Displays a set of actions related to the main content, also essentially a RawChip, used as follows:

ActionChip(
    avatar: CircleAvatar(
      backgroundColor: Colors.grey.shade800,
      child: Text('mencius'),
    ),
    label: Text('the old meng'),
    onPressed: () {
      print("onPressed");
    })
Copy the code

The effect is as follows:

The effect is much like a button class control.

communication

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