flutter_tags 0.1.8

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 90

flutter_tags #

pub package Donate

Flutter tags let you create a list of tags or insert them dynamically with the input.

Installing #

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

dependencies:
  flutter_tags: "^0.1.8"

DEMO #

Example

Demo 1 Demo 2

Selectable Tags #

The Tag class has some optional parameters. If you want to insert an icon, the title is not displayed but you can always use it.

Tag(
    id: 1,// optional
    icon: Icon.home, // optional
    title: 'First Tag', // required
    active: true, // optional
)

Simple usage #

import 'package:flutter_tags/selectable_tags.dart';
.
.
.

List<Tag> _tags=[];

@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.forEach((item) =>
            _tags.add(
                Tag(
                    id: item.id,
                    title: item.title, 
                    active: bool.fromEnvironment(item.active) == "true",
                )
            )
        );  
    });
    
}


//Widget
SelectableTags(
    tags: _tags,
    columns: 3, // default 4
    symmetry: true, // default false
    onPressed: (tag){
        print(tag);
    },
)

void _getActiveTags()
{
    _tags.where((tag) => tag.active).forEach((tag) => print(tag.title));
}

void _getDisableTags()
{
    _tags.where((tag) => !tag.active).forEach((tag) => print(tag.title));
}

All parameters #

  • tags - List 'Tag'
  • columns - max columns (default 4)
  • height - custom height of Tag (default auto-resize)
  • borderRadius - custom border radius
  • borderSide - style border Side
  • boxShadow - List<BoxShadow> of tag
  • symmetry - bool
  • singleItem - default false - same Radiobutton group HTML
  • margin - margin between the tags
  • alignment - default MainAxisAlignment.center
  • offset - default 2
  • fontSize - default 14
  • textOverflow - ellipsis, clip...(default fade)
  • textColor - default black
  • textActiveColor - default white
  • color - background color of tag (default white)
  • activeColor - background color of active tag (default green)
  • backgroundContainer - default white
  • onPressed - method

Input Tags #

Note #

In the console you will receive some errors. InputTags not work properly because textField has some bugs. here is one Bug 1

Simple usage #

import 'package:flutter_tags/input_tags.dart';
.
.
.

List<String> _tags=[];

@override
void initState()
{
    super.initState();
    _tags.addAll(
         [
             'first tag',
             'android world',
             'substring',
             'last tag',
             'enable'
         ]
    );
    
}


//Widget
InputTags(
    tags: _tags,
    onDelete: (tag){
        print(tag);
    },
    onInsert: (tag){
        print(tag);
    },
)

void _getTags()
{
    _tags.forEach((tag) => print(tag));
}

All parameters #

  • tags - List 'String'
  • columns - max columns (default 4)
  • autofocus - default true
  • inputDecoration - textInput style
  • maxLength - max length of textField (int)
  • keyboardType - TextInputType
  • height - custom height of Tag (default auto-resize)
  • borderRadius - custom border radius (default 3)
  • boxShadow - List<BoxShadow> of tag
  • symmetry - default false
  • margin - margin between the tags
  • alignment - default MainAxisAlignment.center
  • offset - default 3
  • duplicate - allows you to insert duplicates (default false)
  • fontSize - default 14
  • iconSize - default auto-resize
  • iconColor - default White
  • iconBackground - default transparent
  • textOverflow - ellipsis, clip...(default fade)
  • textColor - default white
  • lowerCase - default false
  • color - background color of tag (default green)
  • backgroundContainer - default white
  • highlightColor - default green'700'
  • onDelete - return the tag deleted
  • onInsert - return the tag entered

Issues #

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

[0.1.8] - 2019-02-16.

  • Improvement of library documentation.

[0.1.7] - 2019-02-07.

  • Added new feature SingleItem on SelectableTags; - Possibility to change color/background-color icon on InputTags; - General improvement of the code.

[0.1.6] - 2019-01-07.

  • Fixed error "Infinity or NaN toInt" on InputTags; - general improvement of the code.

[0.1.5] - 2018-12-24.

  • Added new features - general improvement of the code.

[0.1.4] - 2018-12-18.

  • Added new features - general improvement of the code.

[0.1.3] - 2018-12-16.

  • Added new highlight feature (InputTags) - general improvement of the code.

[0.1.2] - 2018-12-15.

  • Add InputTags Widget - Improved documentation.

[0.1.1] - 2018-12-08.

  • Improved documentation.

[0.1.0] - 2018-12-08.

  • Did some changing readme.

[0.0.1] - 2018-12-08.

  • Created Selectable Tags.

example/README.md

Example Flutter Tags #

An example of how you could implement it.

Getting Started - Selectable Tags #

import 'package:flutter/material.dart';

import 'package:flutter_tags/input_tags.dart';
import 'package:flutter_tags/selectable_tags.dart';

void main() => runApp(MyApp());


class MyApp extends StatelessWidget
{
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blueGrey,
      ),
      home: MyHomePage(title: 'flutter_tags - Test'),
    );
  }
}


class MyHomePage extends StatefulWidget
{
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}


class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin
{
  TabController _tabController;
  ScrollController _scrollViewController;

  final List<String> _list = [
    '0','SDk','plugin updates','Facebook',
    'First','Italy','France','Spain','Dart','Foo','Select','lorem ip',
    'Star','Flutter Selectable Tags','1','Hubble','2','Input flutter tags','A B C','Android Studio developer','welcome to the jungle','very large text',
  ];

  bool _symmetry = false;
  bool _singleItem = false;
  int _column = 4;
  double _fontSize = 14;

  String _selectableOnPressed = '';
  String _inputOnPressed = '';

  List<Tag> _selectableTags = [];
  List<String> _inputTags = [];

  List _icon=[
    Icons.home,
    Icons.language,
    Icons.headset
  ];


  @override
  void initState()
  {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
    _scrollViewController = ScrollController();

    int cnt = 0;
    _list.forEach((item)
    {
        _selectableTags.add (
            Tag (id: cnt,
                title: item,
                active: (_singleItem) ? ( cnt==3 ? true:false ) : true,
                icon: (item == '0' || item == '1' || item == '2') ?
                _icon[ int.parse (item
                ) ] : null
            )
        );
        cnt++;
    }
    );

    _inputTags.addAll(
        [
            'first tag',
            'android world',
            'pic',
            'substring',
            'last tag',
            'enable',
            'act',
            'first',
            'return',
            'lollipop',
            'loop',
        ]
    );

  }


  @override
  Widget build(BuildContext context)
  {
        return Scaffold(
          body: NestedScrollView(
              controller: _scrollViewController,
              headerSliverBuilder: (BuildContext context,bool boxIsScrolled){
                return <Widget>[
                  SliverAppBar(
                    title: Text("flutter_tags - Test"),
                    centerTitle: true,
                    pinned: true,
                    expandedHeight: 110.0,
                    floating: true,
                    forceElevated: boxIsScrolled,
                    bottom: TabBar(
                      isScrollable: true,
                      indicatorSize: TabBarIndicatorSize.label,
                      labelStyle: TextStyle(fontSize: 18.0),
                      tabs: [
                        Tab(text: "Selectable"),
                        Tab(text: "Input"),
                      ],
                      controller: _tabController,
                    ),
                  )
                ];
              },
              body: TabBarView(
                controller: _tabController,
                children:  [
                  ListView(
                    children: <Widget>[
                      Column(
                        children: <Widget>[
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                              GestureDetector(
                                child: Row(
                                  children: <Widget>[
                                    Checkbox(
                                        value: _symmetry,
                                        onChanged: (a){
                                          setState(() {
                                            _symmetry = !_symmetry;
                                          });
                                        }
                                    ),
                                    Text('Symmetry')
                                  ],
                                ),
                                onTap: (){
                                  setState(() {
                                    _symmetry = !_symmetry;
                                  });
                                },
                              ),
                              GestureDetector(
                                  child: Row(
                                      children: <Widget>[
                                          Checkbox(
                                              value: _singleItem,
                                              onChanged: (a){
                                                  setState(() {
                                                      _singleItem = !_singleItem;
                                                  });
                                              }
                                          ),
                                          Text('Single Item')
                                      ],
                                  ),
                                  onTap: (){
                                      setState(() {
                                          _singleItem = !_singleItem;
                                      });
                                  },
                              ),
                              Padding(
                                padding: EdgeInsets.all(20),
                              ),
                              DropdownButton(
                                hint: Text(_column.toString()),
                                items: _buildItems(),
                                onChanged: (a) {
                                  setState(() {
                                    _column = a;
                                  });
                                },
                              ),
                              Text("Columns")
                            ],
                          ),
                          Column(
                            children: <Widget>[
                              Text('Font Size'),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: <Widget>[
                                  Slider(
                                    value: _fontSize,
                                    min: 6,
                                    max: 30,
                                    onChanged: (a){
                                      setState(() {
                                        _fontSize = (a.round()).toDouble();
                                      });
                                    },
                                  ),
                                  Text(_fontSize.toString()),
                                ],
                              ),
                            ],
                          ),
                          Padding(
                            padding: EdgeInsets.all(10),
                          ),
                          Container(
                            child:
                            SelectableTags(
                              tags: _selectableTags,
                              columns: _column,
                              fontSize: _fontSize,
                              symmetry: _symmetry,
                              singleItem: _singleItem,
                              //activeColor: Colors.deepPurple,
                              //boxShadow: [],
                              //margin: EdgeInsets.symmetric(horizontal: 3, vertical: 6),
                              onPressed: (tag){
                                setState(() {
                                  _selectableOnPressed = tag.toString();
                                });
                              },
                            ),
                          ),
                          Container(
                              padding: EdgeInsets.all(10),
                              child: Divider(color: Colors.blueGrey,)
                          ),
                          Container(
                              padding: EdgeInsets.only(left: 10),
                              alignment: Alignment.topLeft,
                              child: Text("OnPressed",style: TextStyle(fontSize: 18),)),
                          Container(
                              padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                              alignment: Alignment.topLeft,
                              child: Text(_selectableOnPressed)
                          )
                        ],
                      ),
                    ],
                  ),
                  ListView(
                      children: <Widget>[
                          Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                  GestureDetector(
                                      child: Row(
                                          children: <Widget>[
                                              Checkbox(
                                                  value: _symmetry,
                                                  onChanged: (a){
                                                      setState(() {
                                                          _symmetry = !_symmetry;
                                                      });
                                                  }
                                              ),
                                              Text('Symmetry')
                                          ],
                                      ),
                                      onTap: (){
                                          setState(() {
                                              _symmetry = !_symmetry;
                                          });
                                      },
                                  ),
                                  Padding(
                                      padding: EdgeInsets.all(20),
                                  ),
                                  DropdownButton(
                                      hint: Text(_column.toString()),
                                      items: _buildItems(),
                                      onChanged: (a) {
                                          setState(() {
                                              _column = a;
                                          });
                                      },
                                  ),
                                  Text("Columns")
                              ],
                          ),
                          Column(
                              children: <Widget>[
                                  Text('Font Size'),
                                  Row(
                                      mainAxisAlignment: MainAxisAlignment.center,
                                      children: <Widget>[
                                          Slider(
                                              value: _fontSize,
                                              min: 6,
                                              max: 30,
                                              onChanged: (a){
                                                  setState(() {
                                                      _fontSize = (a.round()).toDouble();
                                                  });
                                              },
                                          ),
                                          Text(_fontSize.toString()),
                                      ],
                                  ),
                              ],
                          ),
                          Padding(
                              padding: EdgeInsets.all(10),
                          ),
                          Container(
                              padding: EdgeInsets.symmetric(horizontal: 15),
                              child:
                              InputTags(
                                  tags: _inputTags,
                                  columns: _column,
                                  fontSize: _fontSize,
                                  symmetry: _symmetry,
                                  iconBackground: Colors.green[800],
                                  //boxShadow: [],
                                  //color: Colors.red,
                                  //margin: EdgeInsets.all(15),
                                  lowerCase: true,
                                  autofocus: true,
                                  onDelete: (tag){
                                      print(tag);
                                  },
                                  onInsert: (tag){
                                      print(tag);
                                  },
                              ),
                          ),
                          Padding(
                              padding: EdgeInsets.all(10),
                          ),
                          Padding(
                              padding: EdgeInsets.all(10),
                              child: RaisedButton(
                                  child: Text('Print all Tags'),
                                  onPressed: (){
                                      _inputOnPressed ='';
                                      _inputTags.forEach((tag) =>
                                          setState(() {
                                              _inputOnPressed+='${tag},\n';
                                          })
                                      );
                                  }
                              ),
                          ),
                          Padding(
                              padding: EdgeInsets.all(10),
                              child: Text(_inputOnPressed),
                          ),
                      ],
                  )
                ],
              )
          ),
        );
  }


  List<DropdownMenuItem> _buildItems()
  {
    List<DropdownMenuItem> list = [];

    int count = 15;

    for(int i = 1; i < count; i++)
      list.add(
        DropdownMenuItem(
          child: Text(i.toString() ),
          value: i,
        ),
      );

    return list;
  }
}

DEMO #

Demo 1 Demo 2

Other #

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Use this package as a library

1. Depend on it

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


dependencies:
  flutter_tags: ^0.1.8

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_tags/input_tags.dart';
import 'package:flutter_tags/selectable_tags.dart';
  
Version Uploaded Documentation Archive
0.1.8 Feb 16, 2019 Go to the documentation of flutter_tags 0.1.8 Download flutter_tags 0.1.8 archive
0.1.7 Feb 7, 2019 Go to the documentation of flutter_tags 0.1.7 Download flutter_tags 0.1.7 archive
0.1.6 Jan 7, 2019 Go to the documentation of flutter_tags 0.1.6 Download flutter_tags 0.1.6 archive
0.1.5 Dec 24, 2018 Go to the documentation of flutter_tags 0.1.5 Download flutter_tags 0.1.5 archive
0.1.4 Dec 18, 2018 Go to the documentation of flutter_tags 0.1.4 Download flutter_tags 0.1.4 archive
0.1.3 Dec 16, 2018 Go to the documentation of flutter_tags 0.1.3 Download flutter_tags 0.1.3 archive
0.1.2 Dec 15, 2018 Go to the documentation of flutter_tags 0.1.2 Download flutter_tags 0.1.2 archive
0.1.1 Dec 8, 2018 Go to the documentation of flutter_tags 0.1.1 Download flutter_tags 0.1.1 archive
0.1.0 Dec 8, 2018 Go to the documentation of flutter_tags 0.1.0 Download flutter_tags 0.1.0 archive
0.0.1 Dec 8, 2018 Go to the documentation of flutter_tags 0.0.1 Download flutter_tags 0.0.1 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
79
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
90
Learn more about scoring.

We analyzed this package on Feb 16, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.1.0
  • pana: 0.12.13
  • Flutter: 1.2.0

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Format lib/input_tags.dart.

Run flutter format to format lib/input_tags.dart.

Format lib/selectable_tags.dart.

Run flutter format to format lib/selectable_tags.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.68.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test