Tags Input Textfield in Flutter

Flutter Tagging

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

Install

dependencies:
  flutter_tagging: ^1.1.0

Demo

List<Language> _selectedLanguages = [];

FlutterTagging<Language>(
    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(
                    Icons.add_circle,
                    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: () {
      print();
    }
);

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

Credits:
This is developed by sarbagyastha
Download this project from the below link.
https://github.com/sarbagyastha/flutter_tagging/archive/refs/heads/master.zip
You can visit original source page from the below link:
https://github.com/sarbagyastha/flutter_tagging