flutter_tags_x

flutter_tags_x

Create beautiful tags quickly and easily.

Forked from Dn-a/flutter_tags (Not supported)

Installing

Add this to your package's pubspec.yaml file: Null-safety version MORE INFO

dependencies:
  flutter_tags_x: ... # last version

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(Item(
                title: str,
                active: true,
                index: 1,                
              ));
          });
        },
      ),
      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<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

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

Issues

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