zeewell / material_tag_editor

A simple tag editor for inputing tags in Flutter.

Material Tag Editor

Breaking Changes for 0.0.6

• Correct the spelling of TagEditor's named parameter, delimeters to delimiters

A simple tag editor for inputing tags.

Usage

Add the package to pubspec.yaml

dependencies:
  material_tag_editor: x.x.x

Import it

import 'package:material_tag_editor/tag_editor.dart';

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,
  ),
)

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);
      },
    );
  }
}