flutter_tags
With flutter tags you can create selectable or input tags that automatically adapt to the screen width
Create beautiful tags quickly and easily.
Installing
Add this to your package's pubspec.yaml file:
DEMO
![]() |
![]() |
Simple usage
Wrapped widget example
You are free to wrap ItemTags () inside another widget
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
index
- requiredtitle
- requiredtextScaleFactor
- custom textScaleFactoractive
- 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
- BorderRadiusborder
- custom border-sidepadding
- default EdgeInsets.symmetric(horizontal: 7, vertical: 5)elevation
- default 5singleItem
- default falsetextOverflow
- default TextOverflow.fadetextColor
- default Colors.blacktextActiveColor
- default Colors.whitecolor
- default Colors.whiteactiveColor
- default Colors.blueGreyhighlightColor
-splashColor
-colorShowDuplicate
- default Colors.redonPressed
- callbackonLongPressed
- callbackonRemoved
- callback