TagField class
A highly customizable tag input field widget for Flutter applications.
TagField provides a complete solution for tag input with features including:
- Multiple layout options (wrap, inline, column, etc.)
- Extensive visual customization
- Tag validation and duplicate checking
- Animation support
- Custom tag builders
- Various input behaviors
Example usage:
TagField(
initialTags: ['flutter', 'dart'],
maxTags: 10,
allowDuplicates: false,
hintText: 'Add programming languages...',
onTagsChanged: (tags) {
print('Tags updated: $tags');
},
tagBackgroundColor: Colors.blue.shade100,
tagTextColor: Colors.blue.shade800,
)
- Inheritance
-
- Object
- DiagnosticableTree
- Widget
- StatefulWidget
- TagField
Constructors
-
TagField({Key? key, List<
String> initialTags = const [], int? maxTags, bool allowDuplicates = false, String hintText = 'Add tags...', TextStyle? inputTextStyle, InputDecoration? inputDecoration, bool enabled = true, FocusNode? focusNode, TextInputAction textInputAction = TextInputAction.done, List<String> separators = const [' ', ',', '\n'], Color tagBackgroundColor = const Color(0xFFE3F2FD), Color tagTextColor = const Color(0xFF1976D2), Color tagBorderColor = const Color(0xFF90CAF9), double tagBorderWidth = 1.0, double tagBorderRadius = 16.0, TextStyle? tagTextStyle, EdgeInsetsGeometry tagPadding = const EdgeInsets.symmetric(horizontal: 12, vertical: 6), EdgeInsetsGeometry tagMargin = const EdgeInsets.only(right: 6, bottom: 6), double tagSpacing = 6.0, double tagRunSpacing = 6.0, IconData deleteIcon = Icons.close, Color deleteIconColor = const Color(0xFF666666), double deleteIconSize = 16.0, bool showDeleteIcon = true, Color containerBackgroundColor = Colors.transparent, Color containerBorderColor = const Color(0xFFE0E0E0), double containerBorderWidth = 1.0, double containerBorderRadius = 8.0, EdgeInsetsGeometry containerPadding = const EdgeInsets.all(8.0), double? containerHeight, double? containerMinHeight, double? containerMaxHeight, TagInputLayout layout = TagInputLayout.wrap, CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.start, MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, WrapAlignment wrapAlignment = WrapAlignment.start, WrapCrossAlignment wrapCrossAlignment = WrapCrossAlignment.start, Duration animationDuration = const Duration(milliseconds: 200), Curve animationCurve = Curves.easeInOut, bool enableAnimations = true, dynamic onTagsChanged(List<String> )?, dynamic onTagAdded(String)?, dynamic onTagRemoved(String)?, String? tagValidator(String)?, Widget tagBuilder(String, int, VoidCallback )?, bool autofocus = false, bool trimTags = true, bool caseSensitive = false, bool submitOnEnter = true, bool clearInputOnSubmit = true, TextOverflow tagTextOverflow = TextOverflow.ellipsis, int? maxTagLines = 1}) -
Creates a new TagField widget.
const
Properties
- allowDuplicates → bool
-
Whether duplicate tags are allowed in the field.
final
- animationCurve → Curve
-
Animation curve for tag transitions.
final
- animationDuration → Duration
-
Duration for tag addition and removal animations.
final
- autofocus → bool
-
Whether the input field should automatically receive focus.
final
- caseSensitive → bool
-
Whether tag comparison is case-sensitive.
final
- clearInputOnSubmit → bool
-
Whether to clear the input field after successfully adding a tag.
final
- containerBackgroundColor → Color
-
The background color of the main container.
final
- containerBorderColor → Color
-
The border color of the main container.
final
- containerBorderRadius → double
-
The border radius of the container in logical pixels.
final
- containerBorderWidth → double
-
The width of the container border in logical pixels.
final
- containerHeight → double?
-
Fixed height of the container.
final
- containerMaxHeight → double?
-
Maximum height constraint for the container.
final
- containerMinHeight → double?
-
Minimum height constraint for the container.
final
- containerPadding → EdgeInsetsGeometry
-
Internal padding of the main container.
final
- crossAxisAlignment → CrossAxisAlignment
-
Cross-axis alignment for column layout.
final
- deleteIcon → IconData
-
The icon used for the delete button on tags.
final
- deleteIconColor → Color
-
The color of the delete icon.
final
- deleteIconSize → double
-
The size of the delete icon in logical pixels.
final
- enableAnimations → bool
-
Whether to enable animations for tag operations.
final
- enabled → bool
-
Whether the input field is enabled for user interaction.
final
- focusNode → FocusNode?
-
Custom focus node for the input field.
final
- hashCode → int
-
The hash code for this object.
no setterinherited
- hintText → String
-
The hint text displayed in the input field when it's empty.
final
-
initialTags
→ List<
String> -
The initial list of tags to display when the widget is first created.
final
- inputDecoration → InputDecoration?
-
Custom input decoration for the text field.
final
- inputTextStyle → TextStyle?
-
The text style applied to the input field text.
final
- key → Key?
-
Controls how one widget replaces another widget in the tree.
finalinherited
- layout → TagInputLayout
-
The layout strategy for displaying tags.
final
- mainAxisAlignment → MainAxisAlignment
-
Main axis alignment for column layout.
final
- maxTagLines → int?
-
Maximum number of lines for tag text.
final
- maxTags → int?
-
The maximum number of tags that can be added to the field.
final
- onTagAdded → dynamic Function(String)?
-
Called when a new tag is successfully added.
final
- onTagRemoved → dynamic Function(String)?
-
Called when a tag is removed.
final
-
onTagsChanged
→ dynamic Function(List<
String> )? -
Called whenever the tag list changes (addition or removal).
final
- runtimeType → Type
-
A representation of the runtime type of the object.
no setterinherited
-
separators
→ List<
String> -
List of characters that trigger tag creation when typed.
final
- showDeleteIcon → bool
-
Whether to show the delete icon on tags.
final
- submitOnEnter → bool
-
Whether pressing Enter should submit the current input as a tag.
final
- tagBackgroundColor → Color
-
The background color of individual tags.
final
- tagBorderColor → Color
-
The border color for tags.
final
- tagBorderRadius → double
-
The border radius for tag corners in logical pixels.
final
- tagBorderWidth → double
-
The width of the tag borders in logical pixels.
final
- tagBuilder → Widget Function(String, int, VoidCallback )?
-
Custom builder function for tag widgets.
final
- tagMargin → EdgeInsetsGeometry
-
External margin around each tag.
final
- tagPadding → EdgeInsetsGeometry
-
Internal padding within each tag.
final
- tagRunSpacing → double
-
Vertical spacing between tag rows in wrap layouts.
final
- tagSpacing → double
-
Horizontal spacing between tags in wrap layouts.
final
- tagTextColor → Color
-
The text color for tag labels.
final
- tagTextOverflow → TextOverflow
-
How to handle text overflow in tag labels.
final
- tagTextStyle → TextStyle?
-
Custom text style for tag labels.
final
- tagValidator → String? Function(String)?
-
Custom validation function for tags.
final
- textInputAction → TextInputAction
-
The action to show on the keyboard when the input field is focused.
final
- trimTags → bool
-
Whether to trim whitespace from tags before adding them.
final
- wrapAlignment → WrapAlignment
-
Alignment for wrap layout.
final
- wrapCrossAlignment → WrapCrossAlignment
-
Cross-axis alignment for wrap layout.
final
Methods
-
createElement(
) → StatefulElement -
Creates a StatefulElement to manage this widget's location in the tree.
inherited
-
createState(
) → State< TagField> -
Creates the mutable state for this widget at a given location in the tree.
override
-
debugDescribeChildren(
) → List< DiagnosticsNode> -
Returns a list of DiagnosticsNode objects describing this node's
children.
inherited
-
debugFillProperties(
DiagnosticPropertiesBuilder properties) → void -
Add additional properties associated with the node.
inherited
-
noSuchMethod(
Invocation invocation) → dynamic -
Invoked when a nonexistent method or property is accessed.
inherited
-
toDiagnosticsNode(
{String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode -
Returns a debug representation of the object that is used by debugging
tools and by DiagnosticsNode.toStringDeep.
inherited
-
toString(
{DiagnosticLevel minLevel = DiagnosticLevel.info}) → String -
A string representation of this object.
inherited
-
toStringDeep(
{String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String -
Returns a string representation of this node and its descendants.
inherited
-
toStringShallow(
{String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String -
Returns a one-line detailed description of the object.
inherited
-
toStringShort(
) → String -
A short, textual description of this widget.
inherited
Operators
-
operator ==(
Object other) → bool -
The equality operator.
inherited