With flutter tags you can create selectable or input tags that automatically adapt to the screen width

Related tags

UI flutter_tags
Overview

flutter_tags

pub package Awesome Flutter Donate

Create beautiful tags quickly and easily.

Installing

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_tags: "^0.4.9+1"

DEMO

Simple usage

import 'package:flutter_tags/flutter_tags.dart';
.
.
.
List _items;
double _fontSize = 14;

@override
void initState(){
    super.initState();
    // if you store data on a local database (sqflite), then you could do something like this
    Model().getItems().then((items){
            _items = items;
        });
}

@override
Widget build(BuildContext context) {
    return Tags(
      key:_tagStateKey,
      textField: TagsTextField(
        textStyle: TextStyle(fontSize: _fontSize),
        constraintSuggestion: true, suggestions: [],
        //width: double.infinity, padding: EdgeInsets.symmetric(horizontal: 10),
        onSubmitted: (String str) {
          // Add item to the data source.
          setState(() {
              // required
            _items.add(str);
          });
        },
      ),
      itemCount: _items.length, // required
      itemBuilder: (int index){          
            final item = _items[index];
    
            return ItemTags(
                  // Each ItemTags must contain a Key. Keys allow Flutter to
                  // uniquely identify widgets.
                  key: Key(index.toString()),
                  index: index, // required
                  title: item.title,
                  active: item.active,
                  customData: item.customData,
                  textStyle: TextStyle( fontSize: _fontSize, ),
                  combine: ItemTagsCombine.withTextBefore,
                  image: ItemTagsImage(
                    image: AssetImage("img.jpg") // OR NetworkImage("https://...image.png")
                  ), // OR null,
                  icon: ItemTagsIcon(
                    icon: Icons.add,
                  ), // OR null,
                  removeButton: ItemTagsRemoveButton(
                    onRemoved: (){
                        // Remove the item from the data source.
                        setState(() {
                            // required
                            _items.removeAt(index);
                        });
                        //required
                        return true;
                    },
                  ), // OR null,
                  onPressed: (item) => print(item),
                  onLongPressed: (item) => print(item),
            );
    
      },
    );    
}

final GlobalKey<TagsState> _tagStateKey = GlobalKey<TagsState>();
// Allows you to get a list of all the ItemTags
_getAllItem(){
    List<Item> lst = _tagStateKey.currentState?.getAllItem;
    if(lst!=null)
        lst.where((a) => a.active==true).forEach( ( a) => print(a.title));        
}

Wrapped widget example

You are free to wrap ItemTags () inside another widget

Tags(  
      itemCount: items.length, 
      itemBuilder: (int index){ 
          return Tooltip(
          message: item.title,
          child:ItemTags(
            title:item.title,
          )
          );
      },
    );    

Tags() parameters

PropName Description default value
columns Possibility to set number of columns when necessary null
itemCount Tag number to display required
symmetry Ability to view and scroll tags horizontally false
horizontalScroll Offset drawer width 0.4
heightHorizontalScroll height for HorizontalScroll to set to display tags correctly 60
spacing Horizontal space between the tags 6
runSpacing Vertical space between the tags 14
alignment Horizontal WrapAlignment WrapAlignment.center
runAlignment Vertical WrapAlignment WrapAlignment.center
direction Direction of the ItemTags Axis.horizontal
verticalDirection Iterate Item from the lower to the upper direction or vice versa VerticalDirection.down
textDirection Text direction of the ItemTags TextDirection.ltr
itemBuilder tag generator
textField add textField TagsTextFiled()

ItemTags() parameters

  • index - required
  • title - required
  • textScaleFactor - custom textScaleFactor
  • active - bool value (default true)
  • pressEnabled - active onPress tag ( default true)
  • customData - Possibility to add any custom value in customData field, you can retrieve this later. A good example: store an id from Firestore document.
  • textStyle - textStyle()
  • alignment - MainAxisAlignment ( default MainAxisAlignment.center)
  • combine - * ability to combine text, icons, images in different ways ( default ItemTagsCombine.imageOrIconOrText)*
  • icon - ItemTagsIcon()
  • image - ItemTagsImage()
  • removeButton - ItemTagsRemoveButton()
  • borderRadius - BorderRadius
  • border - custom border-side
  • padding - default EdgeInsets.symmetric(horizontal: 7, vertical: 5)
  • elevation - default 5
  • singleItem - default false
  • textOverflow - default TextOverflow.fade
  • textColor - default Colors.black
  • textActiveColor - default Colors.white
  • color - default Colors.white
  • activeColor - default Colors.blueGrey
  • highlightColor -
  • splashColor -
  • colorShowDuplicate - default Colors.red
  • onPressed - callback
  • onLongPressed - callback
  • onRemoved - callback

Donate

It takes time to carry on this project. If you found it useful or learned something from the source code please consider the idea of donating 5, 20, 50 € or whatever you can to support the project.

  • Donate

Issues

If you encounter problems, open an issue. Pull request are also welcome.

Comments
  • I want to add no matched tag when using suggestions

    I want to add no matched tag when using suggestions

    I think this is very good package!!

    I want to ask, why I can't add no matched tag when using suggestions? Is there are reason that you can't do?

    I think, this "if" is prevent to do that https://github.com/Dn-a/flutter_tags/blob/master/lib/src/suggestions_textfield.dart#L135 and https://github.com/Dn-a/flutter_tags/blob/master/lib/src/suggestions_textfield.dart#L128 change to be

        if (_suggestions != null && _matches.length > 0) str = _matches.first;
    

    thank you!

    feature 
    opened by hatano0x06 12
  • singleItem not working with multi-tags!

    singleItem not working with multi-tags!

              SelectTags(tags: _form),
              Divider(height: 1.0, indent: 0.0),
              SelectTags(tags: _type),
              Divider(height: 1.0, indent: 0.0),
    
    import 'dart:convert';
    import 'package:flutter/material.dart';
    import 'package:flutter/services.dart';
    import 'package:flutter_screenutil/flutter_screenutil.dart';
    import 'package:flutter_tags/flutter_tags.dart';
    
    class SelectTags extends StatefulWidget {
      final Map<String, String> tags;
    
      const SelectTags({Key key, this.tags}) : super(key: key);
    
      @override
      _SelectTagsState createState() => _SelectTagsState(tags);
    }
    
    class _SelectTagsState extends State<SelectTags> {
      final Map<String, String> tags;
    
      _SelectTagsState(this.tags);
    
      bool _symmetry = false;
      bool _startDirection = false;
      bool _horizontalScroll = true;
      int _column = 0;
      double _fontSize = 16;
    
      ItemTags _buildTagItem(Map<String,String> tags, index) {
        final item = tags.keys.elementAt(index);
        
        return ItemTags(
          key: Key(index.toString()),
          index: index,
          elevation: 0,
          title: item,
          active: false,
          singleItem: true,
          textColor: Colors.grey,
          textActiveColor: Colors.white,
          customData: item,
          color: Colors.white,
          activeColor: Colors.green[400],
          textScaleFactor: utf8.encode(item.substring(0, 1)).length > 2 ? 0.8 : 1,
          textStyle: TextStyle(fontSize: _fontSize),
          pressEnabled: true,
          onPressed: (_item) {
    
          },
        );
      }
    
      @override
      Widget build(BuildContext context) {
        return Container(
              margin: EdgeInsets.all(5),
              child: Tags(
                  symmetry: _symmetry,
                  columns: _column,
                  horizontalScroll: _horizontalScroll,
                  verticalDirection: _startDirection
                      ? VerticalDirection.up
                      : VerticalDirection.down,
                  textDirection:
                      _startDirection ? TextDirection.rtl : TextDirection.ltr,
                  heightHorizontalScroll: 35 * (_fontSize / 14),
                  itemCount: tags.entries.length,
                  alignment: WrapAlignment.start,
                  itemBuilder: (index) => _buildTagItem(tags, index)));
      }
    }
    

    when i click the tags in first SelectTags, it working, but not working in second SelectTags!

    opened by Maclaon 8
  • How to force rebuild of Tags when active state has changed?

    How to force rebuild of Tags when active state has changed?

    I have 3 Tags widgets on a page and the active state of the items in each widget is controlled by a _selectedTags list in the stateful parent widget state.

    If I update this list using setState (via OnPressed) the only widget that updates is one that is pulling its content directly from _selectedTags (ie. the length of this list has changed which seems to force a rebuild), the other two widgets are not updating even though the value that controls "active" for the tag items has changed.

    Is there anyway to force the other Tags widgets to rebuild to show the new active states?

    Hope this makes sense!

    question 
    opened by barees63 8
  • duplicate values in Textfield.

    duplicate values in Textfield.

    Entered values shows up twice on the textfield. But logging the content of my String array after onInsert callback, shows no duplicate values from the array. N/B: duplicate is set to false too.

    bugfix 
    opened by asapJ 8
  • Suggestions moves textfield up and suggestions do not align perfectly with text

    Suggestions moves textfield up and suggestions do not align perfectly with text

    Here is the textfield without any text in it.

    image

    Here is the textfield with text - it shifts up (compare spacing to the gray box above the 'f').

    image

    Here is the textfield with a suggestion behind the input text:

    image

    bugfix 
    opened by johnmastri 7
  • the method of selectable tags is called every second

    the method of selectable tags is called every second

    I have put some log at the start of the build and it seems to be called every second.

    I/flutter (27503): build selectableTags [] I/flutter (27503): build selectableTags [] I/chatty (27503): uid=10085(eu.delperdange.pmp_app) Thread-3 identical 158 lines I/flutter (27503): build selectableTags [] I/flutter (27503): build selectableTags [] I/chatty (27503): uid=10085(eu.delperdange.pmp_app) Thread-3 identical 148 lines I/flutter (27503): build selectableTags [] I/flutter (27503): build selectableTags [] I/chatty (27503): uid=10085(eu.delperdange.pmp_app) Thread-3 identical 133 lines I/flutter (27503): build selectableTags [] I/flutter (27503): build selectableTags [] I/chatty (27503): uid=10085(eu.delperdange.pmp_app) Thread-3 identical 163 lines I/flutter (27503): build selectableTags [] I/flutter (27503): build selectableTags []

    question 
    opened by bzd2000 6
  • onInsert and onDelete confusing and difficult to manage

    onInsert and onDelete confusing and difficult to manage

    I find the onInsert and onDelete implementation difficult to manage because it changes the input tags field and also triggers to inform the parent component on an insert or on a delete. This means you cannot set it with a contructor field from the parent (which should be final) For me the input tags fields should be immutable and then

    onInsert returns the the added onDelete returns the deleted eventually onChange return the complete changed list of tags

    enhancement 
    opened by bzd2000 6
  • Single item mode is not working properly with horizontal scroll

    Single item mode is not working properly with horizontal scroll

    Selecting tag item causes an exception in case Tags widget builds with horizontalScroll: true and ItemTags - with singleItem: true.

    I'm very new in flutter, but I've made a small investigation. It looks like, that in case horizontal scrolling with no symmetry the default ListView widget is used for building tag items list. If singleItem mode is true, selecting of tag item causes an exception, because of not all ListView items was builded and we are not be able to "disativate" each item in ItemTagsState._singleItem()

    As I said, I'm new with flutter. I think, I get a reason of that bug (hope I get it right :smile: ), but I have no idea how to fix it in a proper way.

    Steps to reproduce:

    1. run example app
    2. enable horizontal scroll and single item checkboxes
    3. switch to "Demo 2" tab and move back to "Demo 1"
    4. try to select tag item with pre-selected options in step two

    Stack trace:

    ════════ Exception caught by gesture ═══════════════════════════════════════════════════════════════
    The following NoSuchMethodError was thrown while handling a gesture:
    The getter 'active' was called on null.
    Receiver: null
    Tried calling: active
    
    When the exception was thrown, this was the stack: 
    #0      Object.noSuchMethod (dart:core-patch/object_patch.dart:51:5)
    #1      _ItemTagsState._singleItem.<anonymous closure> (package:flutter_tags/src/item_tags.dart:442:27)
    #2      WhereIterator.moveNext (dart:_internal/iterable.dart:442:13)
    #3      WhereIterator.moveNext (dart:_internal/iterable.dart:441:22)
    #4      Iterable.forEach (dart:core/iterable.dart:283:23)
    ...
    Handler: "onTap"
    Recognizer: TapGestureRecognizer#e7b35
      debugOwner: GestureDetector
      state: ready
      won arena
      finalPosition: Offset(203.6, 240.7)
      finalLocalPosition: Offset(66.6, 26.0)
      button: 1
      sent tap down
    ════════════════════════════════════════════════════════════════════════════════════════════════════
    
    bugfix 
    opened by afominov 4
  • Purposes of popupMenuBuilder and popupMenuOnSelected on SelectableTags

    Purposes of popupMenuBuilder and popupMenuOnSelected on SelectableTags

    Hi! Please let me know if questions like this can be better answered elsewhere, but I was hoping to learn more about the purposes of popupMenuBuilder and popupMenuOnSelected on SelectableTags. What are the sole purposes of those and where can I see the examples/demos using such options? I noticed that the example snippet of code on README.md makes use of those options, but I simply do not see the differences with/without those options in my application. I read the documentation as well, but it simply says Popup Menu Items.

    Any help would be appreciated. Thanks!

    opened by yehee 4
  • InputTags class doesn't take inputDecoration into account while creating the input field

    InputTags class doesn't take inputDecoration into account while creating the input field

    To fix it, this line: https://github.com/Dn-a/flutter_tags/blob/20adfae6398eb775926ec607454f6d6659b8822e/lib/input_tags.dart#L473 should look like this:

    inputDecoration: widget.inputDecoration ?? InputDecoration(
    
    opened by milosjovac 4
  • Possibility to remove tag

    Possibility to remove tag

    It would be very good that there is a possibility to remove one tag (same as on InputTags with "x" button), but without an option, for a user to add new tags.

    feature goal 
    opened by d3xt3r2909 4
  • Is it possible to customize close button place?

    Is it possible to customize close button place?

    I need to build a person tag list, where every tag has a person avatar icon (left) and a user name (right). If a user taps on a tag, then close button must appear instead (on the place) of the person avatar. If the user taps again, then close button disappear and on its place again person avatar. Can I implement such functionality using flutter_tags?

    opened by PavelTurkish 0
  • expose textfield controller

    expose textfield controller

    Any idea how i can put a text in TagsTextField? my objective is when user tap one of the tags, it will remove that tags and set the value of textfield base on what user taps. its like editing tags.

    opened by Carlo-TMC 0
  • Null-safety changes. Fixed bug with DataList being null during _setDataList

    Null-safety changes. Fixed bug with DataList being null during _setDataList

    I used the dart migrate to generate the null-safety changes and then fixed any remaining issues by hand. I was experiencing the same DataList being set to null error that others were having and I fixed that bug. Note: I had to create DataList objects and the title was required so I set the title to "--". I could have set it to "".

    Thanks for your work on this widget. I'm currently using the widget in a custom Reactive Form widget.

    opened by coolbootscoder 0
  • Null safe Alternative

    Null safe Alternative

    Seem that this project is not supported anymore Here is a fork that has implemented null safety: https://github.com/avdosev/flutter_tags/ https://pub.dev/packages/flutter_tags_x/install

    opened by lemberh 1
Releases(0.4.9+1)
Tour guide App UI in Flutter Consist of Three Pages. First Screen is Splash Screen , Second is welcome screen routing to third Screen and Third screen consist of details , navigation, places, and responsive UI.

Tour Guide // Tourism App Ui in Flutter. Tour Guid App Ui in Flutter. Visit Website Features State Management Navigation Bar Responsive Design Hybrid

Habib ullah 2 Nov 14, 2022
A Flutter Widget Approach for using HTML tags & CSS styles in your upcoming Apps.

html_widgets A Flutter Widget Approach for using HTML tags & CSS styles in your upcoming Apps. Text Widgets *text property is required for all the tex

XenonLabz 7 Jul 14, 2022
This package provides some widgets you can use to create a smooshy UI.

Dough Library Squishy widgets for Flutter. Quick Links Dough Demos Here are a few samples of the different widgets provided by this repo. You can find

Josiah Saunders 530 Dec 23, 2022
Flutter Credit Card Input form

This package provides visually beautiful UX through animation of credit card information input form. Preview Installing Add dependency to pubspec.yaml

Jeongtae Kim 426 Jan 5, 2023
Native text input from iOS for Flutter

Native Text Input for Flutter A text input widget built using the native UITextView on iOS (this package only supports iOS for now). Installation Foll

Henry Leung 55 Dec 24, 2022
A nice clean onboarding screen for your e-commerce app that can run both Andriod and iOS devices because it builds with flutter

A nice clean onboarding screen for your e-commerce app that can run both Andriod and iOS devices because it builds with flutter

null 23 Dec 4, 2022
Fluid layouts allows you to create responsive layout for mobile, web and desktop from a single codebase.

Fluid layout aims to help building a responsive experience through all the different screen sizes. Based in the boostrap approach, FluidLayout calculates a padding content (fluid_padding) that changes depending on the parent size. The Fluid widget uses that padding to set its size

Jaime Blasco 3 Jan 10, 2022
A TypeAhead widget for Flutter, where you can show suggestions to users as they type

Flutter TypeAhead A TypeAhead (autocomplete) widget for Flutter, where you can show suggestions to users as they type Features Shows suggestions in an

null 661 Jan 5, 2023
Flutter Widgets that you can touch and feel

Flutter widgets you haven't used yet. Problems that proximity solves Currently, Flutter has a lot of useful pre-built widgets, no, too many widgets. T

Masahiro Aoki 32 Nov 8, 2022
A flutter package to display a country, states, and cities. In addition it gives the possibility to select a list of countries, States and Cities depends on Selected, also you can search country, state, and city all around the world.

A flutter package to display a country, states, and cities. In addition it gives the possibility to select a list of countries, States and Cities depends on Selected, also you can search country, state, and city all around the world.

Altaf Razzaque 25 Dec 20, 2022
The most complete flutter plugin packages for open various settings screen in Android and Ios

open_settings The most complete flutter plugin packages for open various settings screen in Android and Ios For Android: this plugin currently support

Ali Hoseinpoor 15 Dec 11, 2022
E-commerce On-boarding Screen UI using flutter

E commerce Onboarding Screen Watch it on YouTube E commerce On-boarding Screen U

Behruz Hurramov 3 Mar 24, 2022
DirectSelect is a selection widget with an ethereal, full-screen modal popup displaying the available choices when the widget is interact with. https://dribbble.com/shots/3876250-DirectSelect-Dropdown-ux

direct-select-flutter DirectSelect is a selection widget with an ethereal, full-screen modal popup displaying the available choices when the widget is

null 582 Jan 4, 2023
A Splash screen with curved custom bottom sheet and dots indicator within it.

Pub.dev Curved Splash Screen A Splash screen with curved custom bottom sheet and dots indicator within it. You can add your custom splash screens acco

Hosain Mohamed 16 Dec 1, 2022
I developed this application just for learning purpose. There are over 20 screen variations.

Welcome to Flutter-Shopping-UI-Kit ?? Shopping UI design in Flutter Flutter-Shopping-UI-Kit Introduction I made an e-commerce UI concept in Flutter fo

Ali Anıl Koçak 591 Dec 26, 2022
Create mobile game store design using Flutter

Create mobile game store design using Flutter

Firgia 16 Nov 25, 2022
Create mobile marketplace design using Flutter

On this Marketplace Design has two pages one for the product page which has a horizontal list of categories then a list of our products. Then on the details page, it shows the price, rating, total view, and description of the product with the Buy Now button.

Firgia 29 Nov 25, 2022
Project Flutter which discusses how to create a movie dashboard UI

MOvApps (Flutter Project) Hi everybody. How are you guys? May you always be in good health and of course always be blessed by God! I want to showcase

Aqshal Rizqullah 1 Nov 30, 2021
A Flutter package to easily create a Credit Card in your application.

Awesome Card A flutter package to create a Credit Card widget in your application. Stay tuned for the latest updates: ?? Screenshots ⚙️ Installation I

Vivek Kaushik 142 Dec 1, 2022