flutter_tags 0.3.0 copy "flutter_tags: ^0.3.0" to clipboard
flutter_tags: ^0.3.0 copied to clipboard

outdated

Flutter tags let you create clickable tags or create new ones using textField, adapting perfectly to the width of the screen.

example/lib/main.dart

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter/services.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','哔了狗了QP又不够了',
    'Kirchhoff','Italy','France','Spain','美','Dart','Foo','Select','lorem ip','9',
    'Star','Flutter Selectable Tags','1','Hubble','2','Input flutter tags','A B C','8','Android Studio developer','welcome to the jungle','Gauss',
      '美术',
      '互联网',
      '炫舞时代',
      '篝火营地',
  ];

  bool _symmetry = false;
  bool _singleItem = false;
  bool _withSuggesttions = false;
  int _count = 0;
  int _column = 8;
  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',
            '1',
            '上上下下左右左右',
            '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.symmetric(horizontal: 20),
                                  ),
                                  Container(
                                      height:   30,
                                      width: 30,
                                      color: Colors.blueGrey,
                                      child: IconButton(
                                          padding: EdgeInsets.all(0),
                                          color: Colors.white,
                                          icon: Icon(Icons.add),
                                          onPressed: (){
                                              setState(() {
                                                  _count++;
                                                  _selectableTags.add(
                                                      Tag(
                                                          title:_count.toString(),
                                                          active: _count%2==0
                                                      )
                                                  );
                                              });
                                          },
                                      ),
                                  ),
                                ],
                              ),
                            ],
                          ),
                          Padding(
                            padding: EdgeInsets.all(10),
                          ),
                          Container(
                            child:
                            SelectableTags(
                                tags: _selectableTags,
                                columns: _column,
                                fontSize: _fontSize,
                                symmetry: _symmetry,
                                singleItem: _singleItem,
                                //offset: -2,
                                //activeColor: Colors.deepPurple,
                                //boxShadow: [],
                                //borderRadius:5,
                                //margin: EdgeInsets.symmetric(horizontal: 6, vertical: 6),
                                //padding: EdgeInsets.symmetric(horizontal: 10),
                                //height: 26,
                                //borderRadius: BorderRadius.all(Radius.elliptical(20, 5)),
                                //height: 28,
                                popupMenuBuilder: (Tag tag){
                                    return <PopupMenuEntry>[
                                        PopupMenuItem(
                                            child: Text(tag.title,
                                                style: TextStyle(
                                                    color: Colors.black87,fontWeight: FontWeight.w800
                                                ),
                                            ),
                                            enabled: false,
                                        ),
                                        PopupMenuDivider(),
                                        PopupMenuItem(
                                            value: 1,
                                            child: Row(
                                                children: <Widget>[
                                                    Icon(Icons.content_copy,size: 18,),
                                                    Text(" Copy text"),
                                                ],
                                            ),
                                        ),
                                        PopupMenuItem(
                                            value: 2,
                                            child: Row(
                                                children: <Widget>[
                                                    Icon(Icons.delete,size: 18,),
                                                    Text(" Remove"),
                                                ],
                                            ),
                                        ),
                                        PopupMenuDivider(),
                                        PopupMenuItem(
                                            value: 3,
                                            child: Row(
                                                children: <Widget>[
                                                    Icon(Icons.format_color_fill,color:_color,size: 18,),
                                                    Text("  Randomize"),
                                                ],
                                            ),
                                        ),
                                        PopupMenuItem(
                                            value: 4,
                                            child: Row(
                                                children: <Widget>[
                                                    Icon(Icons.format_color_reset,color: Colors.grey,size: 18,),
                                                    Text(" Reset"),
                                                ],
                                            ),
                                            enabled: tag.activeColor!=null,
                                        ),
                                    ];
                                },
                                popupMenuOnSelected: (int id,Tag tag){
                                    switch(id){
                                        case 1:
                                            Clipboard.setData( ClipboardData(text: tag.title));
                                            break;
                                        case 2:
                                            setState(() {
                                                _selectableTags.remove(tag);
                                            });
                                            break;
                                        case 3:
                                            _randomColors();
                                            setState(() {
                                                tag.activeColor = _color;
                                            });
                                            break;
                                        case 4:
                                            setState(() {
                                                tag.activeColor = null;
                                            });
                                    }
                                },
                                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")
                              ],
                          ),
                          Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                  GestureDetector(
                                      child: Row(
                                          children: <Widget>[
                                              Checkbox(
                                                  value: _withSuggesttions,
                                                  onChanged: (a){
                                                      setState(() {
                                                          _withSuggesttions = !_withSuggesttions;
                                                      });
                                                  }
                                              ),
                                              Text('With suggestions')
                                          ],
                                      ),
                                      onTap: (){
                                          setState(() {
                                              _withSuggesttions = !_withSuggesttions;
                                          });
                                      },
                                  ),
                              ],
                          ),
                          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:
                              InputTags(
                                  tags: _inputTags,
                                  columns: _column,
                                  fontSize: _fontSize,
                                  symmetry: _symmetry,
                                  iconBackground: Colors.green[800],
                                  lowerCase: true,
                                  autofocus: false,
                                  suggestionsList: !_withSuggesttions ? null :
                                  [
                                      "One",
                                      "two",
                                      "android",
                                      "Dart",
                                      "flutter",
                                      "test",
                                      "tests",
                                      "androids",
                                      "androidsaaa",
                                      "Test",
                                      "suggest",
                                      "suggestions",
                                      "last",
                                      "lest"
                                  ],
                                  popupMenuBuilder: (String tag){
                                      return <PopupMenuEntry>[
                                          PopupMenuItem(
                                              child: Text(tag,
                                                  style: TextStyle(
                                                      color: Colors.black87,fontWeight: FontWeight.w800
                                                  ),
                                              ),
                                              enabled: false,
                                          ),
                                          PopupMenuDivider(),
                                          PopupMenuItem(
                                              value: 1,
                                              child: Row(
                                                  children: <Widget>[
                                                      Icon(Icons.content_copy,size: 18,),
                                                      Text(" Copy text"),
                                                  ],
                                              ),
                                          ),
                                          PopupMenuItem(
                                              value: 2,
                                              child: Row(
                                                  children: <Widget>[
                                                      Icon(Icons.delete,size: 18),
                                                      Text(" Remove"),
                                                  ],
                                              ),
                                          )
                                      ];
                                  },
                                  popupMenuOnSelected: (int id,String tag){
                                      switch(id){
                                          case 1:
                                              Clipboard.setData( ClipboardData(text: tag));
                                              break;
                                          case 2:
                                              setState(() {
                                                  _inputTags.remove(tag);
                                              });
                                      }
                                  },
                                  //textFieldHidden: true,
                                  //boxShadow: [],
                                  //offset: -2,
                                  //padding: EdgeInsets.only(left: 11),
                                  //margin: EdgeInsets.symmetric(horizontal: 20, vertical: 6),
                                  //iconPadding: EdgeInsets.all(5),
                                  //iconMargin: EdgeInsets.only(right:5,left: 2),
                                  //borderRadius: BorderRadius.all(Radius.elliptical(50, 5)),
                                  //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),
                          ),
                      ],
                  )
                ],
              )
          ),
        );
  }

  ///Random Colors
  Color _color = Color(0xFFFFFFFF);
  final Random _random = Random();

  void _randomColors()
  {
      setState(() {
          _color = Color.fromARGB(
              _random.nextInt(256),
              _random.nextInt(256),
              _random.nextInt(256),
              _random.nextInt(256),
          );
      });
  }

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

    int count = 19;

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

    return list;
  }
}
295
likes
0
pub points
93%
popularity

Publisher

verified publisherdn-a.dev

Flutter tags let you create clickable tags or create new ones using textField, adapting perfectly to the width of the screen.

Repository (GitHub)
View/report issues

License

unknown (license)

Dependencies

flutter

More

Packages that depend on flutter_tags