Flutter Label Class Control QuanChip

Lao Meng's guide: Flutter has built-in label controls, but they are essentially the same control, but only the attribute parameters are different, you can put them together in the learning process to learn, easy to remember.

RawChip

Material style label control, which is the base class of other label controls, is not normally created directly, but instead uses the following controls:

  • Chip
  • InputChip
  • ChoiceChip
  • FilterChip
  • ActionChip

This control is usually used if you want to customize a label class control.

RawChip can be selected by setting onSelected, deleted by setting onDeleted, or like a button by setting onPressed, it has a label property with a front (avatar) and back icon (deleteIcon).

The basic usage is as follows:

RawChip(
  label: Text('Lao Meng'),
)

The results are as follows:

Disable state settings:

RawChip(
  label: Text('Lao Meng'),
  isEnabled: false,
)

The results are as follows:

Set the left control, typically an icon:

RawChip(
  avatar: CircleAvatar(
    child: Text('Meng'),
  ),
  label: Text('Lao Meng'),
)

The results are as follows:

Set label style and margin:

RawChip(
  label: Text('Lao Meng'),
  labelStyle: TextStyle(color: Colors.blue),
  labelPadding: EdgeInsets.symmetric(horizontal: 10),
)

The results are as follows:

Set delete related properties:

RawChip(
  label: Text('Lao Meng'),
  onDeleted: (){
    print('onDeleted');
  },
  deleteIcon: Icon(Icons.delete),
  deleteIconColor: Colors.red,
  deleteButtonTooltipMessage: 'delete',
)

The results are as follows:

Click the Delete icon to call back onDeleted.

Set shape, background color, and margin:

RawChip(
  label: Text('Lao Meng'),
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
  backgroundColor: Colors.blue,
  padding: EdgeInsets.symmetric(vertical: 10),
)

The results are as follows:

Set Shadow:

RawChip(
  label: Text('Lao Meng'),
  elevation: 8,
  shadowColor: Colors.blue,
)

The results are as follows:

The materialTapTargetSize property controls the minimum click area for details: MaterialTapTargetSize

Set the selected state, color:

bool _selected = false;
RawChip(
  label: Text('Lao Meng'),
  selected: _selected,
  onSelected: (v){
    setState(() {
      _selected = v;
    });
  },
  selectedColor: Colors.blue,
  selectedShadowColor: Colors.red,
)

The results are as follows:

Set the Pre-Check icon in the selected state:

RawChip(
  label: Text('Lao Meng'),
  selected: true,
  showCheckmark: true,
  checkmarkColor: Colors.red,
)

The results are as follows:

When showCheckmark is false, there is no Pre-Check icon.

Set click properties:

RawChip(
  label: Text('Lao Meng'),
  onPressed: (){
    print('onPressed');
  },
  pressElevation: 12,
)

The results are as follows:

There is a ripple effect when clicking.

Chip

Chip is a simple label control that displays only information and deletes related attributes. It is a simplified version of RawChip, just like RawChip.The 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,
  );
}

InputChip

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

InputChip is also RawChip in nature and is used in the same way as RawChip.The 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,
  );
}

ChoiceChip

Allows a single selection from a set of options to create a label similar to a radio button, which is also a RawChip in nature and does not have radio properties.

Radio demo is as follows:

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

The results are as follows:

This control is co-constructed by Ordinary Programmer Provided.

FilterChip

FilterChip can be used as a filter tag and is essentially a RawChip as follows:

List<String> _filters = [];

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

The results are as follows:

ActionChip

Shows a set of actions related to the main content, essentially a RawChip, as follows:

ActionChip(
    avatar: CircleAvatar(
      backgroundColor: Colors.grey.shade800,
      child: Text('Meng'),
    ),
    label: Text('Lao Meng'),
    onPressed: () {
      print("onPressed");
    })

The results are as follows:

It works much like a button-like control.

Communication

Lao Meng Flutter blog address (nearly 200 control usages): http://laomengit.com

Welcome to the Flutter Exchange Group (WeChat: laomengit), Focus on Public Number (Lao Meng Flutter):

Tags: Mobile Attribute

Posted on Sat, 09 May 2020 22:04:26 -0400 by fiddy