DEV Community

Syed Mohd Adnan
Syed Mohd Adnan

Posted on

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'),
  )


Enter fullscreen mode Exit fullscreen mode

Output:
Image description

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;
      });
    }
  )


Enter fullscreen mode Exit fullscreen mode

Output:
Image description

- 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;
      });
    }
  )


Enter fullscreen mode Exit fullscreen mode

Output:
Image description

- 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;
      });
    }
  }


Enter fullscreen mode Exit fullscreen mode

Output:
Image description

- 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');
    },
  )


Enter fullscreen mode Exit fullscreen mode

Output:
Image description

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:
Image description

- 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 ๐Ÿช„
Image description

:
Image description

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 ๐Ÿ˜Š

Top comments (1)

Collapse
 
eswarupkumar profile image
E Swarup Kumar

Thank you so much. It was helpful :)