How to Make Tags Input on TextField in Flutter

In this example, we are going to show you how to make tag input on TextFiled on Flutter. Users can input multiple tags into TextField, delete them or validate it. See the example below:

First, you need to add textfield_tags Flutter package on your project by adding the following line on pubspect.yaml file.

dependencies:
  flutter:
    sdk: flutter
  textfield_tags: ^1.4.2

Import package in your script:

import 'package:textfield_tags/textfield_tags.dart';

TextFieldTags(
    textSeparators: [ 
      " ", //seperate with space
      ',' //sepearate with comma as well
          
    ],
    initialTags: [ //inital tags
      'flutter',
      'fluttercampus'
    ],
    onTag: (tag){
      print(tag);
      //this will give tag when entered new single tag
    },
    onDelete: (tag){
      print(tag);
      //this will give single tag on delete
    },
    validator: (tag){
      //add validation for tags
      if(tag.length < 3){
            return "Enter tag up to 3 characters.";
      }
      return null;
    },
    tagsStyler: TagsStyler( //styling tag style
        tagTextStyle: TextStyle(fontWeight: FontWeight.normal),
        tagDecoration: BoxDecoration(color: Colors.blue[100], borderRadius: BorderRadius.circular(0.0), ),
        tagCancelIcon: Icon(Icons.cancel, size: 18.0, color: Colors.blue[900]),
        tagPadding: EdgeInsets.all(6.0)
    ),
    textFieldStyler: TextFieldStyler( //styling tag text field
        textFieldBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.blue, width: 2)
        )
    ),
)

import 'package:flutter/material.dart';
import 'package:textfield_tags/textfield_tags.dart';

void main() {
  runApp( MaterialApp(
       home: Home()
  ));
}

class Home extends  StatefulWidget {
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {

  List<String> tags = ["flutter", "fluttercampus"]; //initial tags

  @override
  Widget build(BuildContext context) {
    return Scaffold(
         appBar: AppBar(
            title: Text("Enable Tag Input in TextField"),
            backgroundColor: Colors.redAccent,
         ),
          body: Container(
             alignment: Alignment.center,
             padding: EdgeInsets.all(20),
             child: Column(
               children:[
                    TextFieldTags(
                       textSeparators: [ 
                          " ", //seperate with space
                          ',' //sepearate with comma as well
                              
                       ],
                       initialTags: tags,
                       onTag: (tag){
                          print(tag);
                          //this will give tag when entered new single tag
                          tags.add(tag);
                       },
                       onDelete: (tag){
                          print(tag);
                          //this will give single tag on delete
                          tags.remove(tag);
                       },
                       validator: (tag){
                          //add validation for tags
                          if(tag.length < 3){
                               return "Enter tag up to 3 characters.";
                          }
                          return null;
                       },
                       tagsStyler: TagsStyler( //styling tag style
                           tagTextStyle: TextStyle(fontWeight: FontWeight.normal),
                            tagDecoration: BoxDecoration(color: Colors.blue[100], borderRadius: BorderRadius.circular(0.0), ),
                            tagCancelIcon: Icon(Icons.cancel, size: 18.0, color: Colors.blue[900]),
                            tagPadding: EdgeInsets.all(6.0)
                       ),
                       textFieldStyler: TextFieldStyler( //styling tag text field
                            textFieldBorder: OutlineInputBorder(
                               borderSide: BorderSide(color: Colors.blue, width: 2)
                            )
                       ),
                    ),

                    ElevatedButton(
                      onPressed: (){
                         print(tags);
                         //pint list of tags int the TextField
                      }, 
                      child: Text("Print Entered Tags")
                    )
               ]
             ),
          )
      );
  }
}