Press ESC to close

Flutter App : A flutter text input widget for visually typing separated lists, such as a list of email recipients

Provides you a textfield and accompanying controller that users can visually type separated lists into, such as a list of email recipients.

Features

  • Textfield that creates a list as you type
  • Handy controller than can be used with other text fields for more customisation.
  • Remove from list with normal backspace.

screenshot

demo video

Getting started

Add the package to your project pubspec.yaml

    listtextfield: any

Import the package in the project file

    import "package:listtextfield/listtextfield.dart";

Usage

Create a ListTextEditingController with the list separator users should type.

 final _controller = ListTextEditingController(',');

You may also initialise your controller with some items in the list, by providing the optional set of strings.

 final _controller = ListTextEditingController(',', {'InitialItem1', 'InitialItem2',});

Add a ListTextField widget to your widget tree and supply the controller

Widget build(BuildContext context){ return Column( children: [ ListTextField( controller: _controller, itemBuilder: (ctx, item){ // Build how items in the list should appear return Chip( label: Text(value), onDeleted: () => _controller.removeItem(value), ); } ), ], ); }

You can access the typed list by calling items on the controller

    final myItems = _controller.items; 

See example for more information

Additional information

PRs are welcome.
Find an issue? Report it.
If you find the package useful or interesting, please like 👍🏼 it
or drop a ⭐️ on github.

MajorE 👽♦️

GitHub

View Github

Footer Example