Flutter - Using InputChip Widget Examples

In this tutorial, I'm going to show you how to use InputChip widget in Flutter.

There are some chips defined by Material Design, one of which is input chip. Input chips are usually used to represent user input in compact form or provide suggestions for the user. Besides label and avtar, an input chip can also have a delete icon. In Flutter, you can create that kind of chip using InputChip widget.

Other chip types include ActionChip, FilterChip, and ChoiceChip.

Creating InputChip

The constructor of InputChip only requires you to at least pass a Widget as label property.

  InputChip(
    label: Text('Flutter'),
  )

Output:

 

However, as you can see on the above result, the chip is disabled. To make it enabled, you need to pass onPressed callback (and not setting isEnabled to false). Setting isEnabled to true without passing onPressed callback will cause Flutter disabling the widget.

  InputChip(
    selected: _selected,
    label: Text('Flutter'),
    onPressed: () {
      print('Fluter is pressed');
  
      setState(() {
        _selected = !_selected;
      });
    }
  )

Output:

 

Adding Avatar

You can add an avatar which is displayed before the label. It can be an image, an Icon, a CircleAvatar or any kind of Widget.

  InputChip(
    selected: _selected,
    label: Text('Flutter'),
    avatar: FlutterLogo(),
    onPressed: () {
      print('Fluter is pressed');
  
      setState(() {
        _selected = !_selected;
      });
    }
  )

Output:

 

Customizing Label

You can set a custom TextStyle for the label using labelStyle property. There is also labelPadding property which is used to set the padding for the label.

  InputChip(
    selected: _selected,
    label: Text('Flutter'),
    labelStyle: TextStyle(color: Colors.black, fontStyle: FontStyle.italic),
    labelPadding: EdgeInsets.all(10.0),
    avatar: FlutterLogo(),
    onPressed: () {
      print('Fluter is pressed');
  
      setState(() {
        _selected = !_selected;
      });
    }
  }

Output:

 

Customizing Colors

backgroundColor color is used to set the background color of the chip when it's enabled but not selected. When the chip is selected, you can change the color using selectedColor property.

  InputChip(
    selected: _selected,
    label: Text('Flutter'),
    labelStyle: TextStyle(color: Colors.white),
    avatar: FlutterLogo(),
    backgroundColor: Colors.black54,
    selectedColor: Colors.blue,
    onPressed: () {
      print('Fluter is pressed');
  
      setState(() {
        _selected = !_selected;
      });
    }
  )

Output:

 

Adding Tooltip

When the user long presses the chip, you can add a text to be displayed as a tooltip. Use tooltip property for that purpose.

  InputChip(
    selected: _selected,
    label: Text('Flutter'),
    avatar: FlutterLogo(),
    tooltip: 'This is Flutter',
    onPressed: () {
      print('Fluter is pressed');
  
      setState(() {
        _selected = !_selected;
      });
    }
  )

Output:

 

Handling Deletion

If the input chip can be deleted, you need to pass onDeleted callback and Flutter will render a delete icon on the chip.

  InputChip(
    selected: _selected,
    label: Text('Flutter'),
    avatar: FlutterLogo(),
    tooltip: 'This is Flutter',
    onPressed: () {
      print('Fluter is pressed');
  
      setState(() {
        _selected = !_selected;
      });
    },
    onDeleted: () {
      print('Flutter is deleted');
    },
  )

Output:

 

If you want to use a different delete icon, pass the icon to be used as deleteIcon property.

  InputChip(
    selected: _selected,
    label: Text('Flutter'),
    avatar: FlutterLogo(),
    tooltip: 'This is Flutter',
    deleteIcon: Icon(Icons.remove_circle),
    onPressed: () {
      print('Fluter is pressed');
  
      setState(() {
        _selected = !_selected;
      });
    },
    onDeleted: () {
      print('Flutter is deleted');
    },
  )

Output:

 

Setting Elevation and Shadow Color

The elevation of the chip can be customized. Use elevation property to set the elevation of the chip. For the elevation when the chip is pressed, use pressedElevation property.

  InputChip(
    selected: _selected,
    label: Text('Flutter'),
    avatar: FlutterLogo(),
    elevation: 10,
    pressElevation: 5,
    shadowColor: Colors.teal,
    onPressed: () {
      print('Fluter is pressed');
  
      setState(() {
        _selected = !_selected;
      });
    }
  )

Output:

 

Full Code

Below is the full code as well as a usage example for InputChip widget in Flutter.

  import 'package:flutter/material.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Woolha.com Flutter Tutorial',
        home: _InputChipExample(),
      );
    }
  }
  
  class _InputChipExample extends StatefulWidget {
    @override
    _InputChipExampleState createState() => new _InputChipExampleState();
  }
  
  class _InputChipExampleState extends State<_InputChipExample> {
  
    TextEditingController _textEditingController = new TextEditingController();
    List<String> _values = new List();
    List<bool> _selected = new List();
  
    @override
    void dispose() {
      _textEditingController?.dispose();
      super.dispose();
    }
  
    Widget buildChips() {
      List<Widget> chips = new List();
  
      for (int i = 0; i < _values.length; i++) {
        InputChip actionChip = InputChip(
          selected: _selected[i],
          label: Text(_values[i]),
          avatar: FlutterLogo(),
          elevation: 10,
          pressElevation: 5,
          shadowColor: Colors.teal,
          onPressed: () {
            setState(() {
              _selected[i] = !_selected[i];
            });
          },
          onDeleted: () {
            _values.removeAt(i);
            _selected.removeAt(i);
  
            setState(() {
              _values = _values;
              _selected = _selected;
            });
          },
        );
  
        chips.add(actionChip);
      }
  
      return ListView(
        // This next line does the trick.
        scrollDirection: Axis.horizontal,
        children: chips,
      );
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Woolha.com Flutter Tutorial'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(15.0),
          child: Column(
            children: <Widget>[
              Container(
                height: 30,
                child: buildChips(),
              ),
              TextFormField(
                controller: _textEditingController,
              ),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 16.0),
                child: RaisedButton(
                  onPressed: () {
                    _values.add(_textEditingController.text);
                    _selected.add(true);
                    _textEditingController.clear();
  
                    setState(() {
                      _values = _values;
                      _selected = _selected;
                    });
                  },
                  child: Text('Submit'),
                ),
              ),
            ],
          )
        ),
      );
    }
  }
  

Output:

 

Properties

Here's the list of properties of InputChip you can pass to the constructor.

• Key key: The widget key, used to control if it should be replaced.
• Widget avatar: A widget displayed before the label.
• Widget label *: The primary content of the chip.
• TextStyle labelStyle: The text style for the label.
• EdgeInsetsGeometry labelPadding: The padding for the label.
• bool selected: Whether the chip is selected. Defaults to false.
• bool isEnabled: Whether the chip is enabled for input. Defaults to true.
• Widget deleteIcon: The icon to be used when onDeleted is set.
• VoidCallback onDeleted: Callback function that will be called when the delete icon is pressed.
• Color deleteIconColor: Color of the delete icon.
• String deleteButtonTooltipMessage: Tooltip for the delete icon.
• VoidCallback onPressed: A callback function that will be called when the widget is pressed.
• double pressElevation: The elevation when the widget is pressed.
• Color disabledColor: Color if the chip is disabled.
• Color selectedColor: Color for selected chip's background.
• String tooltip: Tooltip that will be displayed by long pressing the chip.
• ShapeBorder shape: The ShapeBorder to draw around the chip.
• Clip clipBehavior: Defines how to clip the content. Defaults to Clip.none.
• FocusNode focusNode: Focus node for the widget.
• bool autofocus: Whether this widget will be set as initial focus. Defaults to false.
• Color backgroundColor: Color for enabled, unselected chip's background.
• EdgeInsetsGeometry padding: The padding between the contents of the chip and the outside shape.
• VisualDensity visualDensity: The compactness of the chip's layout.
• MaterialTapTargetSize materialTapTargetSize : The the minimum size of the tap target.
• double elevation: Elevation relative to its parent.
• Color shadowColor: Color of the chip's shadow if the elevation is greater than 0.
• Color selectedShadowColor: Color of the chip's shadow if the elevation is greater than 0 and the chip is selected.
• bool showCheckmark: Whether to show checkmark.
• Color checkmarkColor: Color of the checkmark.
• ShapeBorder avatarBorder: Border shape for the avatar.

*: required