flutter_tags

pub package Donate

Create beautiful tags quickly and easily.

Since version 0.4.0 the structure of the code has changed radically. SelectableTags andInputTags have been replaced with the Tags () widget. Now it is possible to personalize every single tag, with the possibility of adding icons, images and a removal button. If you still prefer the previous version, go to 0.3.2

Installing

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

dependencies:
  flutter_tags: "^0.4.5"

DEMO

Simple usage


import 'package:flutter_tags/tag.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: TagsTextFiled(  
        textStyle: TextStyle(fontSize: _fontSize),        
        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( ) OR null, 
                  onRemoved: (){
                    // Remove the item from the data source.
                    setState(() {
                        // required
                      _items.removeAt(index); 
                    });
                  },
                  onPressed: (item) => print(item),
                  onLongPressed: (item) => print(item),
            );
    
      },
    );    
}

final GlobalKey<TagsState> _tagStateKey = GlobalKey<TagsState>();
// Allows you to get a list of all the ItemTags
_getAllItem(){
    List<Item> 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

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

Tags() parameters

PropNameDescriptiondefault value
columnsPossibility to set number of columns when necessarynull
itemCountTag number to displayrequired
symmetryAbility to view and scroll tags horizontallyfalse
horizontalScrollOffset drawer width0.4
heightHorizontalScrollheight for HorizontalScroll to set to display tags correctly60
spacingHorizontal space between the tags6
runSpacingVertical space between the tags14
alignmentHorizontal WrapAlignmentWrapAlignment.center
runAlignmentVertical WrapAlignmentWrapAlignment.center
directionDirection of the ItemTagsAxis.horizontal
verticalDirectionIterate Item from the lower to the upper direction or vice versaVerticalDirection.down
textDirectionText direction of the ItemTagsTextDirection.ltr
itemBuildertag generator
textFieldadd textFieldTagsTextFiled()

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

If you found this project helpful or you learned something from the source code and want to thank me:

  • Donate

Issues

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

Libraries

flutter_tags

Dart

VM

dart:ffi
Foreign Function Interface for interoperability with the C programming language. [...]

Web

dart:html
HTML elements and other resources for web-based applications that need to interact with the browser and the DOM (Document Object Model). [...]
dart:js
Low-level support for interoperating with JavaScript. [...]
dart:js_util
Utility methods to efficiently manipulate typed JSInterop objects in cases where the name to call is not known at runtime. You should only use these methods when the same effect cannot be achieved with @JS annotations. These methods would be extension methods on JSObject if Dart supported extension methods.