Flutter InputChips Inside TextFormField

Hi,

I'm writing this tutorial to share and to keep it as reference.
The process of making InputChip and building them inside the TextFormField, by the way this is first time ever that I have written anything so please forgive me for errors in English.

As per this task I didn't find any suitable Dependency in
https://pub.dev/ so I searched a lot and there is not much written about this even on Stack Overflow that's why I did this myself that is also without any dependency.

InputChip is Class provided in flutter Framework to build Chips on Input, to learn more:
https://api.flutter.dev/flutter/material/InputChip-class.html/

---

Now, to Implement this? Follow along:

- Creating InputChip:

Constructor of InputChips least required label property as Widget

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

Output:

By Default these chips are disabled. To enable, 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('ActivatedChip'),
    onPressed: () {
      print('Chip is pressed');

      setState(() {
        _selected = !_selected;
      });
    }
  )

Output:

- Avatar in InputChip:

Avatar Property is used to display before label. It can be an image, an Icon, a CircleAvatar.

InputChip(
    selected: _selected,
    label: Text('Star'),
    avatar: const Icon(Icons.star),
    onPressed: () {
      print('Chip is pressed');

      setState(() {
        _selected = !_selected;
      });
    }
  )

Output:

- Customizing label in InputChip:

Labet text can be customized using labelStyle and labelPadding property.

 InputChip(
    selected: _selected,
    label: Text('italics'),
    labelStyle: TextStyle(color: Colors.black, fontStyle: FontStyle.italic),
    labelPadding: EdgeInsets.all(3.0),
    onPressed: () {
      print('Chip is pressed');

      setState(() {
        _selected = !_selected;
      });
    }
  }

Output:

- Other Properties in InputChip:

• backgroundColor
• selectedColor
• tooltip (shows text on longPress on chip)

- Handling Deletion in InputChip:

For deletion inputchip can be provided with a delete icon to delete with onDeleted property passed inside onPressed callback.

  InputChip(
    selected: _selected,
    label: Text('Delete'),
    onPressed: () {
      print('Chip is pressed');

      setState(() {
        _selected = !_selected;
      });
    },
    onDeleted: () {
      print('Chip is deleted');
    },
  )

Output:

Now you Be Like Enough of InputChip Knowledge How to Pass data to make them render inside TextField, don't fret I'll describe and post full code:

- Custom Text in InputChip:

• Declare TextEditingController.
• For inputting data, you need to provide either a TextField or TextFormField.

• In TextFormField controller property call TextEditingController.

• Now using Callback get the Input value as TextEditingController.text inside the chip Label

Output:

- Getting Chip Inside TextFormField:

• Make a List to hold the value of chip on TextEditingController Callback.
• Then map List value to a variable.
• Inside decoration property in TextFormField create another chip.
• Used the map variable inside the new chip as label on the callback of previous chip.

Voila 🪄

:

GitHub repository
The code is open source, so if you want to get it you can do it here:
https://github.com/im-adnan/TextInputChips_Example

Thanks for reading this article, I hope that now you could understand better how to Implement InputChips inside TextFields. If this was helpful for you, I’ll really appreciate your feedback and also your claps! 👏

You can find me on Twitter: @1m_adnan 😊

Comments

[E Swarup Kumar]

Thank you so much. It was helpful :)