Flutter Tagging

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



1. Depend

Add this to you package's pubspec.yaml file:

  flutter_tagging: ^1.1.0

2. Install

Run command:

$ flutter packages get

3. Import

Import in Dart code:

import 'package:flutter_tagging/flutter_tagging.dart';

4. Using Flutter Tagging

/// textFieldDecoration: Adds decoration to TextField.
/// addButtonWidget: Button to be shown when new pattern is typed.
/// chipsColor: Background Color of Chips. Default is light grey.
/// chipsFontColor: Font Color of Chips. Default is black.
/// deleteIcon: Delete Icon to be included in Chips. Default is Material Cancel Icon.
/// chipsPadding: Imposes padding inside chips.
/// chipsSpacing: Defines horizontal space between chips.
/// suggestionsCallback: Callback to get suggestions as per the pattern entered.
/// onChanged: Callback to get result on data change.
     textFieldDecoration: InputDecoration(
         border: OutlineInputBorder(),
         hintText: "Tags",
         labelText: "Enter tags"),
     addButtonWidget: _buildAddButton(),
     chipsColor: Colors.pinkAccent,
     chipsFontColor: Colors.white,
     deleteIcon: Icon(Icons.cancel,color: Colors.white),
     chipsPadding: EdgeInsets.all(2.0),
     chipsFontSize: 14.0,
     chipsSpacing: 5.0,
     chipsFontFamily: 'helvetica_neue_light',
     suggestionsCallback: (pattern) async {
       return await TagSearchService.getSuggestions(pattern);
     onChanged: (result) {
       setState(() {
         text = result.toString();

For more detailed usage of properties, head on to flutter_typeahead's documentation.


Example sources