Download StackFood Multi Restaurant, Food Delivery App with Laravel Admin and Restaurant Panel Buy Full App on $79
Download FlutKit - Flutter UI Kit Most beautiful Flutter UI Kit with 20+ Full App, 450+ Screens. Buy Full Kit on $39
Download Fluxstore Multi Vendor WooCommerce/Dokan Plugin compatible WordPress eCommerce Flutter App. Buy Full App on $79

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';

How to Make Tags Input on Text Field:

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

Full Fluter Code Example: (Add, Delete, Get Methods)

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

Output Screenshot:

In this way, you can make Tags input on TextFiled in Flutter.

No any Comments on this Article


Please Wait...