A TextField flutter package with tagging functionality.

Overview

Flutter Tagging

Pub Package licence

A flutter package with tagging or multi-select functionality. Useful for adding Tag or Label Selection Forms.

DEMO

List<Language> _selectedLanguages = [];

FlutterTagging<Language>(
    initialItems: _selectedLanguages,
    textFieldConfiguration: TextFieldConfiguration(
        decoration: InputDecoration(
            border: InputBorder.none,
            filled: true,
            fillColor: Colors.green.withAlpha(30),
            hintText: 'Search Tags',
            labelText: 'Select Tags',
        ),
    ),
    findSuggestions: LanguageService.getLanguages,
    additionCallback: (value) {
        return Language(
                name: value,
                position: 0,
        );
    },
    onAdded: (language){
      // api calls here, triggered when add to tag button is pressed
        return Language();
    },
    configureSuggestion: (lang) {
        return SuggestionConfiguration(
            title: Text(lang.name),
            subtitle: Text(lang.position.toString()),
            additionWidget: Chip(
                avatar: Icon(
                    Icons.add_circle,
                    color: Colors.white,
                ),
                label: Text('Add New Tag'),
                labelStyle: TextStyle(
                    color: Colors.white,
                    fontSize: 14.0,
                    fontWeight: FontWeight.w300,
                ),
                backgroundColor: Colors.green,
            ),
        );
    },
    configureChip: (lang) {
        return ChipConfiguration(
            label: Text(lang.name),
            backgroundColor: Colors.green,
            labelStyle: TextStyle(color: Colors.white),
            deleteIconColor: Colors.white,
        );
    },
    onChanged: () {
      print();
    }
);

/// LanguageService
class LanguageService {
    /// Mocks fetching language from network API with delay of 500ms.
    static Future<List<Language>> getLanguages(String query) async {
          await Future.delayed(Duration(milliseconds: 500), null);
          return <Language>[
            Language(name: 'JavaScript', position: 1),
            Language(name: 'Python', position: 2),
            Language(name: 'Java', position: 3),
            Language(name: 'PHP', position: 4),
            Language(name: 'C#', position: 5),
            Language(name: 'C++', position: 6),
          ].where((lang) => lang.name.toLowerCase().contains(query.toLowerCase())).toList();
    }
}

License

Copyright 2020 Sarbagya Dhaubanjar. All rights reserved.

Redistribution and use in source and binary forms, with or without modification,
are permitted provided that the following conditions are met:

    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.
    * Neither the name of Google Inc. nor the names of its
      contributors may be used to endorse or promote products derived
      from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Comments
  • Chip delete throws error

    Chip delete throws error

    When trying to delete an added chip I get this error

    I/flutter ( 4895): The following ConcurrentModificationError was thrown while handling a gesture: I/flutter ( 4895): Concurrent modification during iteration: Instance(length:1) of '_GrowableList'.

    resolved 
    opened by premy 4
  • The argument type 'FlutterTagging can`t be assigned to the parameter type `Widget`

    The argument type 'FlutterTagging can`t be assigned to the parameter type `Widget`

    I try to use and get error "The argument type 'FlutterTagging cant be assigned to the parameter typeWidget`". It is only the simple code (example Hello, World + Firebase library, nothing more). Is it suppose to work at Web-version?

    resolved 
    opened by alex89607 3
  • Need Null Safety support

    Need Null Safety support

    from flutter v2.0.2, flutter is now null-safety mechanism. Most of the packages already upgrade to null safety and more are upgrading.

    Thanks for this great package!

    Do you plan to make a null safe version of the package?

    opened by Basher7 2
  • Reviving the package

    Reviving the package

    • A complete refactor for the package will be done and might include breaking changes.
    • The package will be frequently maintained from now on.

    Apolozies for not responding to the issues and PRs.

    Thank You!

    enhancement 
    opened by sarbagyastha 2
  • Fix concurrent update exception deleting chip

    Fix concurrent update exception deleting chip

    Fixed the concurrent update exception issue. The problem was that upon deleting the code was looping through labeledChips and inside the loop the code was also modifying this list. I made a copy of the list to remove from then assigned the modified list back to labeled chips

    opened by Johnathon332 2
  • Recommended way to programmatically clear FlutterTagging after form submit?

    Recommended way to programmatically clear FlutterTagging after form submit?

    What would be the best way to remove the chips and clear the tag widget? i.e. do the same as TextEditingController clear function?

    ourController.clear();
    
    resolved 
    opened by ScottEAdams 2
  • An error occurred while removing chip suggestion.

    An error occurred while removing chip suggestion.

    Hello, I use this packages via the example folder. and I get an error like this:

    I/flutter (14131): The following ConcurrentModificationError was thrown while handling a gesture:
    I/flutter (14131): Concurrent modification during iteration: Instance(length:0) of '_GrowableList'.
    I/flutter (14131): When the exception was thrown, this was the stack:
    I/flutter (14131): #0      ListIterator.moveNext (dart:_internal/iterable.dart:337:7)
    I/flutter (14131): #1      _FlutterTaggingState._buildSuggestions.<anonymous closure> (package:flutter_tagging/flutter_tagging.dart:424:31)
    I/flutter (14131): #2      _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:513:14)
    I/flutter (14131): #3      _InkResponseState.build.<anonymous closure> (package:flutter/src/material/ink_well.dart:568:30)
    I/flutter (14131): #4      GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:120:24)
    I/flutter (14131): #5      TapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:242:9)
    I/flutter (14131): #6      TapGestureRecognizer.acceptGesture (package:flutter/src/gestures/tap.dart:204:7)
    I/flutter (14131): #7      GestureArenaManager.sweep (package:flutter/src/gestures/arena.dart:156:27)
    I/flutter (14131): #8      _WidgetsFlutterBinding&BindingBase&GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:218:20)
    I/flutter (14131): #9      _WidgetsFlutterBinding&BindingBase&GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:192:22)
    I/flutter (14131): #10     _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerEvent (package:flutter/src/gestures/binding.dart:149:7)
    I/flutter (14131): #11     _WidgetsFlutterBinding&BindingBase&GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:101:7)
    I/flutter (14131): #12     _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:85:7)
    I/flutter (14131): #16     _invoke1 (dart:ui/hooks.dart:223:10)
    I/flutter (14131): #17     _dispatchPointerDataPacket (dart:ui/hooks.dart:144:5)
    I/flutter (14131): (elided 3 frames from package dart:async)
    I/flutter (14131): Handler: onTap
    I/flutter (14131): Recognizer:
    I/flutter (14131):   TapGestureRecognizer#32cc7(debugOwner: GestureDetector, state: ready, won arena, finalPosition:
    I/flutter (14131):   Offset(98.5, 231.5), sent tap down)
    I/flutter (14131): ════════════════════════════════════════════════════════════════════════════════════════════════════
    

    my flutter doctor:

    [√] Flutter (Channel stable, v1.2.1, on Microsoft Windows [Version 10.0.17763.379], locale id-ID)
        • Flutter version 1.2.1 at C:\Dev\flutter
        • Framework revision 8661d8aecd (7 weeks ago), 2019-02-14 19:19:53 -0800
        • Engine revision 3757390fa4
        • Dart version 2.1.2 (build 2.1.2-dev.0.0 0a7dcf17eb)
    
    [√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
        • Android SDK at C:\Users\abay\AppData\Local\Android\sdk
        • Android NDK location not configured (optional; useful for native profiling support)
        • Platform android-28, build-tools 28.0.3
        • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
        • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1248-b01)
        • All Android licenses accepted.
    
    [√] Android Studio (version 3.3)
        • Android Studio at C:\Program Files\Android\Android Studio
        • Flutter plugin version 33.4.1
        • Dart plugin version 182.5215
        • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1248-b01)
    
    [√] IntelliJ IDEA Ultimate Edition (version 2018.2)
        • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA 2018.2.1
        • Flutter plugin version 33.3.1
        • Dart plugin version 182.5124
    
    [√] VS Code (version 1.32.3)
        • VS Code at C:\Users\abay\AppData\Local\Programs\Microsoft VS Code
        • Flutter extension version 2.24.0
    
    [√] Connected device (1 available)
        • ASUS X00ID • H9AXGF00Z090RWX • android-arm64 • Android 8.1.0 (API 27)
    resolved 
    opened by febriantok29 2
  • 'TextFieldConfiguration' isn't a function

    'TextFieldConfiguration' isn't a function

    i got an error like this when i try code in example

    error: The name 'TextFieldConfiguration' is defined in the libraries 'package:flutter_typeahead/flutter_typeahead.dart' and 'package:flutter_typeahead_web/flutter_typeahead.dart (via package:flutter_tagging/flutter_tagging.dart)'. (ambiguous_import at ...)

    opened by brizaldi 1
  • How to change input text color/style?

    How to change input text color/style?

    Is it possible to change the color of the typed text? If we saw it right, it was necessary to pass a style property to the textFieldConfiguration of the TypeAheadField-widget, which isn't supported yet?

    opened by yorickreum 1
  • Remove chips programatically

    Remove chips programatically

    With creating a post form there's bound to have a need for removing the chips created. Is there any way to remove the chips programmatically? This should be an in-built function and should be addressed. Thanks!

    resolved 
    opened by leslielyj 1
  • dynamic function cant be assigned to Widget functions

    dynamic function cant be assigned to Widget functions

    while deploying on android i get a gradle error

    error:

    ../../.pub-cache/hosted/pub.dartlang.org/flutter_tagging-3.0.0/lib/src/tagging.dart:222:37: Error: The argument type 'dynamic Function(BuildContext, Widget, AnimationController?)?' can't be assigned to the parameter type 'Widget Function(BuildContext, Widget, AnimationController?)?'.

    doctor:

    Flutter (Channel stable, 2.2.0, on macOS 11.4 20F71 darwin-x64, locale it-IT) • Flutter version 2.2.0 at /Users/marco/fvm/versions/2.2.0 • Framework revision b22742018b (4 months ago), 2021-05-14 19:12:57 -0700 • Engine revision a9d88a4d18 • Dart version 2.13.0

    [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3) • Android SDK at /Users/marco/Library/Android/sdk • Platform android-30, build-tools 30.0.3 • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264) • All Android licenses accepted.

    [✓] Xcode - develop for iOS and macOS • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 12.5.1, Build version 12E507 • CocoaPods version 1.10.1

    [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

    [✓] Android Studio (version 4.2) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)

    [✓] VS Code (version 1.60.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.24.0

    opened by mrcnee93 21
  • Auto unfocus in Android 11

    Auto unfocus in Android 11

    When trying to focus the field when there is no any field is being focused previously, the field will auto unfocus and hide the keyboard by itself

    And the problem only happen in Android 11

    Any solution for this ?

    opened by ahkela21 8
  • Height of the TextField,

    Height of the TextField,

    How can I decrease height of the input field. ? Please check out my design implementation and i really need to decrease height little bit. Here in screenshot i have used your plugin. If I use TextField I can decrease it's height by wrapping it inside a container and setting container's height. I need similar solution if you can help? Thank you

    Screenshot 2020-10-15 at 1 30 07 AM
    opened by ch-muhammad-adil 0
Owner
Sarbagya Dhaubanjar
Senior Software Engineer at @khalti
Sarbagya Dhaubanjar
Flutter-pinbox - UI for enter a PIN on flutter/dart, one digit per textField box.

flutter-pinbox This is a library for enter a PIN on flutter/dart. You can enter one digit per textField box. The detail The library locate at path lib

null 2 Feb 26, 2022
A Flutter widget to show an icon collection to pick. This widget extend TextField and has a similar behavior as TextFormField

icon_picker A Flutter widget to show an icon collection to pick. This widget extend TextField and has a similar behavior as TextFormField Usage In the

m3uzz Soluções em TI 11 Sep 27, 2022
A focusable and blurable TextField widget

Flutter Focus Widget 一个可以让FocusNode失去焦点的Widget A focusable and blurable widget of based on the FocusNode. 新增的参数: bool showFocusArea 使用一个半透明的红色方框显示焦点区域

yeoman 9 Jul 17, 2022
Text and TextField highlighted with rounded corners

rounded_background_text Highlight text with rounded corners Features ✅ Highlight

Bruno D'Luka 39 Nov 6, 2022
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

Eyoel Defare 75 Nov 2, 2022
Contactus - a flutter package. The most common functionality added in any commercial app is the Developer's contact details

Contact Us The most common functionality added in any commercial app is the Developer's contact details!! So this package helps the developers to simp

Abhishek Doshi 19 Aug 4, 2022
Dart package to support Wake-on-LAN functionality

wake_on_lan Dart library package to easily send Wake-on-LAN magic packets to devices on your local network. Getting Started wake_on_lan has three core

Jagandeep Brar 3 Oct 24, 2022
Flutter Control is complex library to maintain App and State management. Library merges multiple functionality under one hood. This approach helps to tidily bound separated logic into complex solution.

Flutter Control is complex library to maintain App and State management. Library merges multiple functionality under one hood. This approach helps to

Roman Hornak 23 Feb 23, 2022
Allows send emails from flutter using native platform functionality.

flutter_email_sender Allows send emails from flutter using native platform functionality. In android it opens default mail app via intent. In iOS MFMa

Tautvydas Šidlauskas 107 Jan 3, 2023
Peek & Pop implementation for Flutter based on the iOS functionality of the same name.

peek_and_pop Peek & Pop implementation for Flutter based on the iOS functionality of the same name. Finally, the v1.0.0 release! More fluent, more opt

AliYigitBireroglu 227 Dec 17, 2022
Flutter After Layout - Brings functionality to execute code after the first layout of a widget has been performed

Flutter After Layout - Brings functionality to execute code after the first layout of a widget has been performed, i.e. after the first frame has been displayed. Maintainer: @slightfoot

Flutter Community 432 Jan 3, 2023
(Flutter)Minimal App With Offline Storage(Using HIVE) Functionality.

TaskZ (Minimal + Offline TODO List App) Minimal App With Offline Storage(Using HIVE) Functionality. Getting Started ?? Any suggestion, improvement on

null 2 Oct 2, 2022
Dead simple WiFi connect functionality for flutter.

Flutter WiFi Connect Easily connect to a specified WiFi AP programmatically, using this plugin. import 'package:wifi_connect/wifi_connect.dart'; WifiC

Scientific Hackers 20 Dec 7, 2022
A Stable GeoFence Library - A flutter project to provide Geo Fence functionality in Android and IOS

A flutter project to provide Geo Fence functionality in Android and IOS Getting Started Android In your AndroidManifest.xml

TARIQUE KHAN 8 Nov 15, 2022
A flutter plugin to support drag-out functionality on native platforms

flutter_native_drag_n_drop A flutter plugin to support the native drag and drop, especially to drag files (only files) out of the application boundary

Skalio GmbH 5 Oct 28, 2022
An easy-to-use flutter http network requests handler with more functionality than http but more simpler than dio.

network_requests An easy-to-use flutter http network requests handler with more functionality than http but more simpler than dio. Platform Supported

Coder_Manuel 3 Dec 15, 2022
This is an auction application just like eBay. Using firebase as the backend for signup & sign-in functionality. In addition to that, it's a two pages application with user bid in input and count down view.

Nilam This is an auction application just like eBay. Using firebase as the backend for signup & sign-in functionality. In addition to that, it's a two

Md. Siam 5 Nov 9, 2022
Live News App Using Rest API with Searching Functionality

News App Flutter A Simple News App built with Flutter. In this app, there is a Home page, which will display top news from newsapi.org. News categorie

Jay Gajjar 146 Dec 30, 2022
Fwitter is an example application that demonstrates the features and functionality of Fauna.

A full introduction to this project can be found in the docs. This project is an example of how to build a 'real-world' app with highly dynamic data i

Fauna Labs 291 Dec 13, 2022