super_tag_editor 0.3.1

A simple tag editor for inputting tags. This is design to act and feel similar the standard Material TextField as much as possible.

Super Tag Editor

A simple tag editor for inputting tags in Flutter.

Enhance:

• Suggestion box
• Validation

Usage

Add the package to pubspec.yaml

dependencies:
  super_tag_editor: x.x.x

copied to clipboard

Import it

import 'package:super_tag_editor/tag_editor.dart';

copied to clipboard

Use the widget

TagEditor(
  length: values.length,
  delimiters: [',', ' '],
  hasAddButton: true,
  inputDecoration: const InputDecoration(
    border: InputBorder.none,
    hintText: 'Hint Text...',
  ),
  onTagChanged: (newValue) {
    setState(() {
      values.add(newValue);
    });
  },
  tagBuilder: (context, index) => _Chip(
    index: index,
    label: values[index],
    onDeleted: onDelete,
  ),
  suggestionBuilder: (context, state, data) => ListTile(
    key: ObjectKey(data),
    title: Text(data),
    onTap: () {
      state.selectSuggestion(data);
    },
  ),
  suggestionsBoxElevation: 10,
  findSuggestions: (String query) {
    return [];
  }
)

copied to clipboard

It is possible to build the tag from your own widget, but it is recommended that Material Chip is used

class _Chip extends StatelessWidget {
  const _Chip({
    @required this.label,
    @required this.onDeleted,
    @required this.index,
  });

  final String label;
  final ValueChanged<int> onDeleted;
  final int index;

  @override
  Widget build(BuildContext context) {
    return Chip(
      labelPadding: const EdgeInsets.only(left: 8.0),
      label: Text(label),
      deleteIcon: Icon(
        Icons.close,
        size: 18,
      ),
      onDeleted: () {
        onDeleted(index);
      },
    );
  }
}

copied to clipboard