Need help with flutter_tags?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Dn-a
217 Stars 54 Forks MIT License 80 Commits 21 Opened issues

Description

With flutter tags you can create selectable or input tags that automatically adapt to the screen width

Services available

!
?

Need anything else?

Contributors list

# 22,043
Dart
Objecti...
iOS
mobile-...
74 commits
# 188,721
Dart
Flutter
HTML
pi-hole
1 commit
# 694,610
Shell
Objecti...
Dart
1 commit
# 468,377
Shell
Dart
Ruby
Flutter
1 commit

flutter_tags

pub package Awesome Flutter Donate

Create beautiful tags quickly and easily.

Installing

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

dart
dependencies:
  flutter_tags: "^0.4.9+1"

DEMO

Simple usage

import 'package:flutter_tags/flutter_tags.dart';
.
.
.
List _items;
double _fontSize = 14;

@override void initState(){ super.initState(); // if you store data on a local database (sqflite), then you could do something like this Model().getItems().then((items){ _items = items; }); }

@override Widget build(BuildContext context) { return Tags( key:_tagStateKey, textField: TagsTextField( textStyle: TextStyle(fontSize: _fontSize), constraintSuggestion: true, suggestions: [], //width: double.infinity, padding: EdgeInsets.symmetric(horizontal: 10), onSubmitted: (String str) { // Add item to the data source. setState(() { // required _items.add(str); }); }, ), itemCount: _items.length, // required itemBuilder: (int index){
final item = _items[index];

        return ItemTags(
              // Each ItemTags must contain a Key. Keys allow Flutter to
              // uniquely identify widgets.
              key: Key(index.toString()),
              index: index, // required
              title: item.title,
              active: item.active,
              customData: item.customData,
              textStyle: TextStyle( fontSize: _fontSize, ),
              combine: ItemTagsCombine.withTextBefore,
              image: ItemTagsImage(
                image: AssetImage("img.jpg") // OR NetworkImage("https://...image.png")
              ), // OR null,
              icon: ItemTagsIcon(
                icon: Icons.add,
              ), // OR null,
              removeButton: ItemTagsRemoveButton(
                onRemoved: (){
                    // Remove the item from the data source.
                    setState(() {
                        // required
                        _items.removeAt(index);
                    });
                    //required
                    return true;
                },
              ), // OR null,
              onPressed: (item) => print(item),
              onLongPressed: (item) => print(item),
        );

  },
);    

}

final GlobalKey _tagStateKey = GlobalKey(); // Allows you to get a list of all the ItemTags _getAllItem(){ List lst = _tagStateKey.currentState?.getAllItem; if(lst!=null) lst.where((a) => a.active==true).forEach( ( a) => print(a.title));
}

Wrapped widget example

You are free to wrap ItemTags () inside another widget

dart
Tags(  
      itemCount: items.length, 
      itemBuilder: (int index){ 
          return Tooltip(
          message: item.title,
          child:ItemTags(
            title:item.title,
          )
          );
      },
    );    

Tags() parameters

|PropName|Description|default value| |:-------|:----------|:------------| |

columns
|Possibility to set number of columns when necessary|null| |
itemCount
|Tag number to display|required| |
symmetry
|Ability to view and scroll tags horizontally|false| |
horizontalScroll
|Offset drawer width|0.4| |
heightHorizontalScroll
|height for HorizontalScroll to set to display tags correctly|60| |
spacing
|Horizontal space between the tags|6| |
runSpacing
|Vertical space between the tags|14| |
alignment
|Horizontal WrapAlignment|WrapAlignment.center| |
runAlignment
|Vertical WrapAlignment|WrapAlignment.center| |
direction
|Direction of the ItemTags|Axis.horizontal| |
verticalDirection
|Iterate Item from the lower to the upper direction or vice versa|VerticalDirection.down| |
textDirection
|Text direction of the ItemTags|TextDirection.ltr| |
itemBuilder
|tag generator|| |
textField
|add textField|TagsTextFiled()|

ItemTags() parameters

  • index
    - required
  • title
    - required
  • textScaleFactor
    - custom textScaleFactor
  • active
    - bool value (default true)
  • pressEnabled
    - active onPress tag ( default true)
  • customData
    - Possibility to add any custom value in customData field, you can retrieve this later. A good example: store an id from Firestore document.
  • textStyle
    - textStyle()
  • alignment
    - MainAxisAlignment ( default MainAxisAlignment.center)
  • combine
    - * ability to combine text, icons, images in different ways ( default ItemTagsCombine.imageOrIconOrText)*
  • icon
    - ItemTagsIcon()
  • image
    - ItemTagsImage()
  • removeButton
    - ItemTagsRemoveButton()
  • borderRadius
    - BorderRadius
  • border
    - custom border-side
  • padding
    - default EdgeInsets.symmetric(horizontal: 7, vertical: 5)
  • elevation
    - default 5
  • singleItem
    - default false
  • textOverflow
    - default TextOverflow.fade
  • textColor
    - default Colors.black
  • textActiveColor
    - default Colors.white
  • color
    - default Colors.white
  • activeColor
    - default Colors.blueGrey
  • highlightColor
    -
  • splashColor
    -
  • colorShowDuplicate
    - default Colors.red
  • onPressed
    - callback
  • onLongPressed
    - callback
  • onRemoved
    - callback

Donate

It takes time to carry on this project. If you found it useful or learned something from the source code please consider the idea of donating 5, 20, 50 € or whatever you can to support the project. - Donate

Issues

If you encounter problems, open an issue. Pull request are also welcome.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.