Press ESC to close

Flutter App : Create beautiful tags quickly and easily for flutter

flutter_tags

pub package
Awesome Flutter
Donate

Create beautiful tags quickly and easily.

Installing

Add this to your package’s pubspec.yaml file:
Null-safety version (Beta) MORE INFO

dependencies:
  flutter_tags: "^1.0.0-nullsafety.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(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

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

  • indexrequired
  • titlerequired
  • textScaleFactorcustom textScaleFactor
  • activebool value (default true)
  • pressEnabledactive onPress tag ( default true)
  • customDataPossibility to add any custom value in customData field, you can retrieve this later. A good example: store an id from Firestore document.
  • textStyletextStyle()
  • alignmentMainAxisAlignment ( default MainAxisAlignment.center)
  • combine – * ability to combine text, icons, images in different ways ( default ItemTagsCombine.imageOrIconOrText)*
  • iconItemTagsIcon()
  • imageItemTagsImage()
  • removeButtonItemTagsRemoveButton()
  • borderRadiusBorderRadius
  • bordercustom border-side
  • paddingdefault EdgeInsets.symmetric(horizontal: 7, vertical: 5)
  • elevationdefault 5
  • singleItemdefault false
  • textOverflowdefault TextOverflow.fade
  • textColordefault Colors.black
  • textActiveColordefault Colors.white
  • colordefault Colors.white
  • activeColordefault Colors.blueGrey
  • highlightColor
  • splashColor
  • colorShowDuplicatedefault Colors.red
  • onPressedcallback
  • onLongPressedcallback
  • onRemovedcallback

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.

GitHub

View Github

Footer Example