Create beautiful flutter tags quickly and easily

Related tags

Widgets 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: Null-safety version (Beta) MORE INFO

dependencies:
  flutter_tags: "^1.0.0-nullsafety.1"

DEMO

Simple usage

print(item), onLongPressed: (item) => print(item), ); }, ); } final GlobalKey _tagStateKey = GlobalKey (); // Allows you to get a list of all the ItemTags _getAllItem(){ List lst = _tagStateKey.currentState?.getAllItem; if(lst!=null) lst.where((a) => a.active==true).forEach( ( a) => print(a.title)); }">
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(Item(
                title: str,
                active: true,
                index: 1,                
              ));
          });
        },
      ),
      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.

You might also like...

Flutter Duration Button - Create auto-click button likes Netflix's Skip Intro button in Flutter

Flutter Duration Button - Create auto-click button likes Netflix's Skip Intro button in Flutter

Flutter Duration Button - Create auto-click button likes Netflix's Skip Intro button in Flutter

Dec 7, 2022

A Flutter Widget that create a horizontal table with fixed column on left hand side.

A Flutter Widget that create a horizontal table with fixed column on left hand side.

horizontal_data_table A Flutter Widget that create a horizontal table with fixed column on left hand side. Installation This package is starting to su

Dec 27, 2022

Custom Flutter widgets that makes Checkbox and Radio Buttons much cleaner and easier.

Custom Flutter widgets that makes Checkbox and Radio Buttons much cleaner and easier.

custom_radio_grouped_button Custom Radio Buttons and Grouped Check Box Button Custom Flutter widgets that makes Checkbox and Radio Buttons much cleane

Sep 23, 2022

Custom widgets and utils using Flutter framework widgets and Dart language

reuse_widgets_and_utils The custom widgets and utils using Flutter framework widgets and Dart programming language. Getting Started This project is a

Oct 29, 2021

The SpannableGrid is a Flutter widget that allows its cells to span columns and rows and supports moving cells inside the grid.

The SpannableGrid is a Flutter widget that allows its cells to span columns and rows and supports moving cells inside the grid.

Spannable Grid The SpannableGrid is a Flutter widget that allows its cells to span columns and rows and supports moving cells inside the grid. Feature

Nov 7, 2022

Pure Dart and Flutter package for Android,IOS and Web

Pure Dart and Flutter package for Android,IOS and Web

Fancy Flutter Alert Dialog Pure Dart and Flutter package for Android,IOS and Web A flutter Package to show custom alert Dialog,you can choose between

Sep 23, 2022

PlutoGrid is a dataGrid that can be controlled by the keyboard on desktop and web. Of course, it works well on Android and IOS.

PlutoGrid is a dataGrid that can be controlled by the keyboard on desktop and web. Of course, it works well on Android and IOS.

PlutoGrid is a dataGrid that can be controlled by the keyboard on desktop and web.

Jan 4, 2023

Customizable Material and Cupertino buttons with progress indicators and more

Customizable Material and Cupertino buttons with progress indicators and more

future_button Customizable Material and Cupertino buttons with progress indicators and more.

Oct 13, 2022

A widget that can be dragged and scrolled in a single gesture and snapped to a list of extents.

A widget that can be dragged and scrolled in a single gesture and snapped to a list of extents.

Sliding Sheet A widget that can be dragged and scrolled in a single gesture and snapped to a list of extents. Click here to view the full example. Ins

Mar 10, 2022
Owner
null
Create beautiful Loading and Timer buttons in Flutter

Argon Buttons (Timer and Loading) Create beautiful Loading and Timer buttons using Argon Buttons. No need to worry about handling animations or timers

Yogesh 213 Dec 11, 2022
Sliding card is a highly customizable flutter package that will help you create beautiful Cards with a sliding animation effect.

Sliding Card Introduction Sliding card is a highly customizable flutter package that will help you create beautiful Cards with a sliding animation eff

null 21 Nov 4, 2022
An alternative to Overlay which allows you to easily render and hit test a widget outside its parent bounds

An alternative to Overlay which allows you to easily render and hit test a widget outside its parent bounds. Based on the original idea by @shrouxm he

gskinner team 26 Dec 31, 2022
SmartSelect allows you to easily convert your usual form select or dropdown into dynamic page

SmartSelect allows you to easily convert your usual form select or dropdown into dynamic page, popup dialog, or sliding bottom sheet with various choices input such as radio, checkbox, switch, chips, or even custom input. Supports single and multiple choice.

Irfan Vigma Taufik 332 Dec 20, 2022
Powerful Complete and Beautiful Search Component for Flutter

A highly customizable search component to accelerate your development. Overview There are many search or search components for Flutter, however this o

Tiagosito 31 Jul 27, 2022
A sliding up panel widget which can be used to show or hide content, beautiful and simple.

flutter_sliding_up_panel A sliding up panel widget which can be used to show or hide content, beautiful and simple. demo Getting Started dependencies:

null 25 Dec 12, 2022
A repository to create and compare different methodologies of reusing local widget state logics.

A repository to create and compare different methodologies of reusing local widget state logics.

Tim Whiting 18 Dec 31, 2022
A beautiful circle color picker for flutter.

A beautiful circle color picker for flutter.

Takeshi Tsukamoto 46 Dec 29, 2022
A Flutter package to show beautiful animated snackbars directly using overlay

Easily show beautiful snack bars directly using overlays. Create custom snack bars and show them with awesome animations.

Sajad Abdollahi 11 Dec 27, 2022
Animated Search Bar package lets you add a beautiful search bar to your Flutter app.

Animated Search Bar Animated Search Bar package lets you add a beautiful search bar to your Flutter app. Installation Add the latest version of packag

Mohammad Saleh 5 Aug 7, 2022