danger-ahead / simple_chips_input

Flutter chips. Demo: https://simplechipsinput.vercel.app

simple_chips_input

Features 🚀

The working screen captures might be outdated.

Please refer to the demo: https://simplechipsinput.vercel.app

• Create chips from user's text input and get the value after form submission.
• Select chips and get the values of the selection.
• Select only one chip at a time and get the value (acts as a toggle/radio button).
• Ability to keep some/all/none pre-selected chips (that can be later changed according to user input).
• Full customisability of the chips - keeping prefix/suffix icons (that can be changed when a particular chip is selected).
• Full customisability of the chips design - change the background color, border color, text color, etc of the chips (can be two sets of designs - one for selected chips and one for unselected chips).
• Much more!

Contents 📚

• Create chips from user's text input and get the value after form submission. Read the API reference for full documentation.
• Select pre-defined chips to get the value of selected chips. Read the API reference for full documentation.

Importing the package ⬇️

import 'package:simple_chips_input/simple_chips_input.dart';
import 'package:simple_chips_input/select_chips_input.dart';

Working ⚙️

For example usage, refer pub.dev example

Author

@danger-ahead

simple_chips_input's Issues

UI design

Hi, I would like to give some UI design for this app using Figma.
Figma is a designing tool where web and app designs can be created.

Update README with all the features

Go through the code in /lib/src/simple_chips_input.dart and /lib/src/text_form_field_style.dart. And list all the features currently available in README.md by means of checkboxes.

How to init value?

SimpleChipsInput(
paddingInsideWidgetContainer: const EdgeInsets.symmetric(horizontal: 16, vertical: 5),
formKey: formKeyEmail,
textFormFieldStyle: TextFormFieldStyle(keyboardType: TextInputType.emailAddress, cursorColor: Theme.of(context).primaryColor),
separatorCharacter: ",",
validateInput: true,
validateInputMethod: (String value) {
final emailRegExp = RegExp(r'^[\w-.]+@([\w-]+.)+[\w-]{2,4}$');
if (!emailRegExp.hasMatch(value)) {
return 'Enter a valid email address';
}
},
onChanged: (value) {},
onSubmitted: (p0) {},
onChipDeleted: (p0, p1) {},
onSaved: ((p0) {
onChangeEmail!(p0);
}),
chipTextStyle: text14(context),
deleteIcon: Padding(
padding: const EdgeInsets.only(left: 5),
child: CircleAvatar(
maxRadius: 10,
backgroundColor: Theme.of(context).bgColor8063(context),
child: const Icon(Icons.close_rounded, size: 14.0, color: Colors.white),
),
),
marginBetweenChips: const EdgeInsets.symmetric(vertical: 4),
widgetContainerDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
border: Border.all(color: Theme.of(context).bgColorCC3A(context)),
),
chipContainerDecoration: BoxDecoration(
color: Theme.of(context).bgColorB356(context).withOpacity(0.2),
borderRadius: BorderRadius.circular(30.0),
),
placeChipsSectionAbove: true,
),

Release new versioin with latest changes.