Flutter InputChips Inside TextFormField
Tags: flutter, dart, textformfield, inputchip
Published: 2022-09-18 18:05:19

**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: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7euihh9jj2hnyt2bzviq.png)


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: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y6gi7scukn8oxag3xxo5.png)
### - 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: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gjaj4y9cr5d7i7u34ho2.png)

### - 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: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2s0hwl7nqq30jpaxri57.png)
### - 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: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qcgv5iz8ney4r7jwrk4.png)

> 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jefzse6ixb4ezib30cef.gif)


### - 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o1ljbea5rq29j0pxzdf2.gif)

: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohy1siebpgqzjwn8o6mw.gif)

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 😊