A simple tag editor for inputing tags in Flutter.

Last update: Jul 29, 2022

Super Tag Editor

A simple tag editor for inputting tags with suggestion box

image

Supported suggestion box

Screen Shot 1 Screen Shot 2
"Screen Shot 2022-03-01 at 15 36 31 Screen Shot 2022-03-01 at 15 36 40)

Usage

Add the package to pubspec.yaml

dependencies:
  super_tag_editor: x.x.x

Import it

import 'package:super_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,
  ),
  suggestionBuilder: (context, state, data) => ListTile(
    key: ObjectKey(data),
    title: Text(data),
    onTap: () {
      state.selectSuggestion(data);
    },
  ),
  suggestionsBoxElevation: 10,
  findSuggestions: (String query) {
    return [];
  }
)

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

GitHub

https://github.com/dab246/super_tag_editor
You might also like...

A lightweight HTML-Richtext editor for Flutter

A lightweight HTML-Richtext editor for Flutter

Flutter HTML Editor Flutter HTML Editor is a simple HTML-based Richtext editor, which is able to edit and parse a selected set of HTML tags into a Flu

Apr 7, 2022

A Flutter package that provides a WYSIWYG editor backed by flutter_inappwebview and the Summernote library.

A Flutter package that provides a WYSIWYG editor backed by flutter_inappwebview and the Summernote library.

Flutter Html Editor - Enhanced Flutter HTML Editor Enhanced is a text editor for Android, iOS, and Web to help write WYSIWYG HTML code with the Summer

Aug 10, 2022

🎨 Flutter Material Theme editor

🎨 Flutter Material Theme editor

🎨 Panache A Flutter Material Theme editor. Panache helps you to create beautiful Material themes for your Flutter applications. Customize widgets col

Aug 10, 2022

A Flutter based code editor

A Flutter based code editor

rich_code_editor A simple package that supports creating code editors in Flutter. Flutter version supported: Flutter 1.22.5 Getting Started There are

Aug 3, 2022

Rich text editor for Flutter

Rich text editor for Flutter

A rich text editor for Flutter FlutterQuill is a rich text editor and a Quill component for Flutter. This library is a WYSIWYG editor built for the mo

Aug 12, 2022

An online Dart editor with support for console, web, and Flutter apps

An online Dart editor with support for console, web, and Flutter apps

DartPad DartPad is a free, open-source online editor to help developers learn about Dart and Flutter. You can access it at dartpad.dev. What is it? Wh

Aug 10, 2022

Panache - 🎨 Flutter Material Theme editor

Panache - 🎨 Flutter Material Theme editor

🎨 Panache A Flutter Material Theme editor. Panache helps you to create beautiful Material themes for your Flutter applications. Customize widgets col

Aug 10, 2022

An Instagram like text editor Flutter widget that helps you to change your text style.

An Instagram like text editor Flutter widget that helps you to change your text style.

TextEditor An instagram like text editor widget for flutter Show some ❤️ and star the repo to support the project Features Edit TextStyle object font

Aug 6, 2022

FLUTTER API: Video Editor allows trim, crop, rotate and scale video with a super flexible UI Design

FLUTTER API: Video Editor allows trim, crop, rotate and scale video with a super flexible UI Design

video_editor My other APIs Scroll Navigation Video Viewer Helpers Features Super flexible UI Design. Support actions: Crop Trim Scale Rotate Cover sel

Aug 2, 2022

Related

Shopify Tag and Product Management App using Flutter and Riverpod State Management
Shopify Tag and Product Management App using Flutter and Riverpod State Management

Myshopify App A Simple Flutter Application project to get List of Tags, Products and Product Details from shopify https://shopicruit.myshopify.com/adm

May 16, 2022
Tag Selector Text
Tag Selector Text

Welcome to Flutter Tag Selector! The fluttertagselector is a flutter package which you can use to create bubble tag selector as show in the below scre

Feb 18, 2021
Json editor - A json editor on flutter
Json editor - A json editor on flutter

Features Support add comment; Support show errors for invalid json text; Pretty

Jul 24, 2022
A Flutter widget for rendering static html as Flutter widgets (Will render over 80 different html tags!)
A Flutter widget for rendering static html as Flutter widgets (Will render over 80 different html tags!)

flutter_html A Flutter widget for rendering HTML and CSS as Flutter widgets. Screenshot 1 Screenshot 2 Screenshot 3 Table of Contents: Installing Curr

Aug 14, 2022
Flutter package to render html as widgets that supports hyperlink, image, audio, video, iframe and many other tags.
Flutter package to render html as widgets that supports hyperlink, image, audio, video, iframe and many other tags.

HtmlWidget monorepo This repo contains the source code for everything HtmlWidget-related. Name Link flutter_widget_from_html_core flutter_widget_from_

Aug 6, 2022
Cross-platform flutter plugin for reading and writing NFC tags. Not maintained anymore - not looking for new maintainer, fork instead.
Cross-platform flutter plugin for reading and writing NFC tags. Not maintained anymore - not looking for new maintainer, fork instead.

nfc_in_flutter NFC in Flutter is a plugin for reading and writing NFC tags in Flutter. It works on both Android and iOS with a simple stream interface

Jul 18, 2022
Allows tags to be entered inside textfield
Allows tags to be entered inside textfield

textfield_tags This is a widget that allows your users to create tags by entering the tag's name inside of textfield and make the tags appear in the t

Aug 4, 2022
📝 Simple text editor/notepad with cloud sync.

txt Simple text editor/notepad with cloud sync. Build Install dependencies: flutter pub get Build: flutter build apk, flutter build ios etc. ToDo's Ad

Aug 14, 2022
WYSIWYG editor for Flutter with a rich set of supported formatting options. (WIP)
WYSIWYG editor for Flutter with a rich set of supported formatting options. (WIP)

✨ rich_editor WYSIWYG editor for Flutter with a rich set of supported formatting options. Based on https://github.com/dankito/RichTextEditor, but for

Aug 1, 2022
A Flutter material theme editor
A Flutter material theme editor

Flutter Theme ⚠️ WARNING: This app is still under development so please expect bugs and missing features in the app. ⚠️ Inspired by Panache, a Flutter

Jan 2, 2022