Tags Input Textfield in Flutter

You are currently viewing Tags Input Textfield in Flutter
Tags Input TextFields

Tags Input Textfield in Flutter

Flutter Tagging

A flutter package with tagging or multi-select functionality. Useful for adding Tag or Label Selection Forms.


  flutter_tagging: ^1.1.0


Tags Input TextFields
Tags Input TextFields
List<Language> _selectedLanguages = [];

    initialItems: _selectedLanguages,
    textFieldConfiguration: TextFieldConfiguration(
        decoration: InputDecoration(
            border: InputBorder.none,
            filled: true,
            fillColor: Colors.green.withAlpha(30),
            hintText: 'Search Tags',
            labelText: 'Select Tags',
    findSuggestions: LanguageService.getLanguages,
    additionCallback: (value) {
        return Language(
                name: value,
                position: 0,
    onAdded: (language){
      // api calls here, triggered when add to tag button is pressed
        return Language();
    configureSuggestion: (lang) {
        return SuggestionConfiguration(
            title: Text(lang.name),
            subtitle: Text(lang.position.toString()),
            additionWidget: Chip(
                avatar: Icon(
                    color: Colors.white,
                label: Text('Add New Tag'),
                labelStyle: TextStyle(
                    color: Colors.white,
                    fontSize: 14.0,
                    fontWeight: FontWeight.w300,
                backgroundColor: Colors.green,
    configureChip: (lang) {
        return ChipConfiguration(
            label: Text(lang.name),
            backgroundColor: Colors.green,
            labelStyle: TextStyle(color: Colors.white),
            deleteIconColor: Colors.white,
    onChanged: () {

/// LanguageService
class LanguageService {
    /// Mocks fetching language from network API with delay of 500ms.
    static Future<List<Language>> getLanguages(String query) async {
          await Future.delayed(Duration(milliseconds: 500), null);
          return <Language>[
            Language(name: 'JavaScript', position: 1),
            Language(name: 'Python', position: 2),
            Language(name: 'Java', position: 3),
            Language(name: 'PHP', position: 4),
            Language(name: 'C#', position: 5),
            Language(name: 'C++', position: 6),
          ].where((lang) => lang.name.toLowerCase().contains(query.toLowerCase())).toList();

This is developed by sarbagyastha
Download this project from the below link.
You can visit original source page from the below link:

Spread the love
See also  Simple Card View with List View Builder using Flutter

Leave a Reply