ScottEAdams / flutter_tags

Flutter tags let you create clickable tags or create new ones using textField, adapting perfectly to the width of the screen.

flutter_tags

Flutter tags let you create clickable tags or create new ones using textField, adapting perfectly to the width of the screen.

Installing

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

dependencies:
  flutter_tags: "^0.3.1"

DEMO

SelectableTags	InputTags

Selectable Tags

The Tag class has some optional parameters. If you want to insert an icon, the title is not displayed but you can always use it.

Tag(
    id: 1,// optional
    icon: Icon.home, // optional
    title: 'First Tag', // required
    active: true, // optional
    color: Colors.white, // optional
    activeColor: Colors.blue // optional
)

Simple usage

import 'package:flutter_tags/selectable_tags.dart';
.
.
.

List<Tag> _tags=[];

@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.forEach((item) =>
            _tags.add(
                Tag(
                    id: item.id,
                    title: item.title, 
                    active: bool.fromEnvironment(item.active) == "true",
                )
            )
        );  
    });
    
}


//Widget
SelectableTags(
    tags: _tags,
    columns: 3, // default 4
    symmetry: true, // default false
    popupMenuBuilder: _popupMenuBuilder,
    popupMenuOnSelected: (int id,Tag tag){
      switch(id){
          case 1:
              Clipboard.setData( ClipboardData(text: tag.title));
              break;
          case 2:
              setState(() {
                  _tags.remove(tag);
              });
      }
    },
    onPressed: (tag) => print(tag),
)

List<PopupMenuEntry> _popupMenuBuilder (Tag tag)
{
    return <PopupMenuEntry>[
      PopupMenuItem(
          child: Text(tag.title, style: TextStyle( color: Colors.blueGrey ) ),
          enabled: false,
      ),
      PopupMenuDivider(),
      PopupMenuItem(
          value: 1,
          child: Row(
              children: <Widget>[
                  Icon(Icons.content_copy),
                  Text("Copy text"),
              ],
          ),
      ),      
    ];
}

void _getActiveTags()
{
    _tags.where((tag) => tag.active).forEach((tag) => print(tag.title));
}

void _getDisableTags()
{
    _tags.where((tag) => !tag.active).forEach((tag) => print(tag.title));
}

All parameters (SelectableTags)

• tags - List 'Tag'
• columns - max columns (default 4)
• height - custom height of Tag (default auto-resize)
• borderRadius - custom border radius (default BorderRadius.circular(_initBorderRadius))
• borderSide - style border Side
• boxShadow - List of tag
• symmetry - bool
• singleItem - default false - same Radiobutton group HTML
• margin - margin between the tags (default 3)
• margin - padding of the tags (default 8)
• alignment - default MainAxisAlignment.center
• offset - Different characters may have different widths(e.g.: chinese character); (default 28)
• fontSize - default 14
• textStyle - if use textStyle, you need to set fontSize in it (the external fontSize will be ignored); if you set color in it will be ignored, you must use textColor/textActiveColor
• textOverflow - ellipsis, clip...(default fade)
• textColor - default black
• textActiveColor - default white
• color - background color of tag (default white)
• activeColor - background color of active tag (default green)
• backgroundContainer - default white
• popupMenuBuilder - Popup Menu Items
• popupMenuOnSelected - On Selected Item
• onPressed - Callback

Input Tags

Note (Flutter version < 1)

In the console you will receive some errors. InputTags not work properly because textField has some bugs.

Simple usage

import 'package:flutter_tags/input_tags.dart';
.
.
.

List<String> _tags=[];

@override
void initState()
{
    super.initState();
    _tags.addAll(
         [
             'first tag',
             'android world',
             'substring',
             'last tag',
             'enable'
         ]
    );
    
}


//Widget
InputTags(
    tags: _tags,
    suggestionsList: 
    [
        "One",
        "two",
        "android",
        "Dart",
        "flutter",
        "test",
        "tests",
        "androids",
        "Test",
        "suggest",
        "suggestions",
        "last",
        "lest"
    ],
    popupMenuBuilder: _popupMenuBuilder,
    popupMenuOnSelected: (int id,String tag){
      switch(id){
          case 1:
              Clipboard.setData( ClipboardData(text: tag));
              break;
          case 2:
              setState(() {
                  _tags.remove(tag);
              });
      }
    },
    onDelete: (tag) => print(tag),
    onInsert: (tag) => print(tag),
)

List<PopupMenuEntry> _popupMenuBuilder ( String tag)
{
    return <PopupMenuEntry>[
      PopupMenuItem(
          child: Text(tag, style: TextStyle( color: Colors.blueGrey ) ),
          enabled: false,
      ),
      PopupMenuDivider(),
      PopupMenuItem(
          value: 1,
          child: Row(
              children: <Widget>[
                  Icon(Icons.content_copy),
                  Text("Copy text"),
              ],
          ),
      ),      
    ];
}

void _getTags()
{
    _tags.forEach((tag) => print(tag));
}

All parameters (InputTags)

• tags - List 'String'
• columns - max columns (default 4)
• autofocus - default true
• inputDecoration - textInput style
• maxLength - max length of textField (int)
• keyboardType - TextInputType
• height - custom height of Tag (default auto-resize)
• borderRadius - custom border radius (default BorderRadius.circular(_initBorderRadius))
• boxShadow - List of tag
• symmetry - default false
• textFieldHidden - default false
• margin - margin between the tags (default 3)
• padding - padding of the tags (default left: 10)
• alignment - default MainAxisAlignment.center
• offset - default 3
• duplicate - allows you to insert duplicates (default false)
• fontSize - default 14
• textColor - Removed. now it can be set with textStyle
• lowerCase - default false
• textStyle - if use textStyle, you need to set fontSize in it (the external fontSize will be ignored)
• textOverflow - ellipsis, clip...(default fade)
• iconSize - default auto-resize
• iconPadding - padding of Icon close (default 3)
• iconMargin - margin of Icon close (default right: 8)
• iconColor - default White
• iconBackground - default transparent
• color - background color of tag (default green)
• backgroundContainer - default white
• highlightColor - default green'700'
• popupMenuBuilder - Popup Menu Items
• popupMenuOnSelected - On Selected Item
• onDelete - return the tag deleted
• onInsert - return the tag entered
• suggestionsList - a List of string that force the insertion of specific items

Donate

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

• 

Issues

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