flutter tags

flutter tags let you create a list of tags or insert them dynamically with the input.

installing

add this to your package’s pubspec.yaml file:

dependencies:
  flutter_tags: "^0.1.9"

demo

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
)

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
    onpressed: (tag){
        print(tag);
    },
)

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

• tags – list ‘tag’
• columns – max columns (default 4)
• height – custom height of tag (default auto-resize)
• borderradius – custom border radius
• borderside – style border side
• boxshadow – list of tag
• symmetry – bool
• singleitem – default false – same radiobutton group html
• margin – margin between the tags
• alignment – default mainaxisalignment.center
• offset – different characters may have different widths(e.g.: chinese character); (default 28)
• fontsize – default 14
• 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
• onpressed – method

input tags

note

in the console you will receive some errors.
inputtags not work properly because textfield has some bugs.
here is one

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,
    ondelete: (tag){
        print(tag);
    },
    oninsert: (tag){
        print(tag);
    },
)

void _gettags()
{
    _tags.foreach((tag) => print(tag));
}

all parameters

• 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 3)
• boxshadow – list of tag
• symmetry – default false
• margin – margin between the tags
• alignment – default mainaxisalignment.center
• offset – default 3
• duplicate – allows you to insert duplicates (default false)
• fontsize – default 14
• iconsize – default auto-resize
• iconcolor – default white
• iconbackground – default transparent
• textoverflow – ellipsis, clip…(default fade)
• textcolor – default white
• lowercase – default false
• color – background color of tag (default green)
• backgroundcontainer – default white
• highlightcolor – default green’700′
• ondelete – return the tag deleted
• oninsert – return the tag entered

download the full project for this post from the following button

this source is fully free for all time

download as zip