With flutter tags you can create selectable or input tags that automatically adapt to the screen width..
Add this to your package's pubspec.yaml file:
dependencies:
flutter_tags: "^0.3.2"
|
|
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: "first",// optional
icon: Icon.home, // optional
title: 'First Tag', // required
active: true, // optional
color: Colors.white, // optional
activeColor: Colors.blue // optional
customData: 'DocumentId' // optional
)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.toString(),
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));
}- 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
- customData: Possibility to add any custom value in
customDatafield, you can retrieve this later. A good example: store an id from Firestore document. - popupMenuBuilder - Popup Menu Items
- popupMenuOnSelected - On Selected Item
- onPressed - Callback
In the console you will receive some errors.
InputTags not work properly because textField has some bugs.
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));
}- 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
If you found this project helpful or you learned something from the source code and want to thank me:
If you encounter problems, open an issue. Pull request are also welcome.