A TextField flutter package with tagging functionality

Flutter Tagging

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

Usage

1. Depend

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

dependencies:
  flutter_tagging: ^1.1.0

YAML

2. Install

Run command:

$ flutter packages get

Bash

3. Import

Import in Dart code:

import 'package:flutter_tagging/flutter_tagging.dart';

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

Dart

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

Example

Example sources

GitHub

sarbagyastha/flutter_tagging

75

A TextField flutter package with tagging functionality. — Read More

Latest commit to the master branch on 3-23-2019

Download as zip