Last updated:
0 purchases
selection item
This package is helping you to show a list of custom object and let user pick one or multiple items form it.
There are 2 type of widget that you can use:
1-ListSelection
2-SingleSelection
In the first one user is able to select more than one item and in the second one user can just select one item.
Getting started #
For using this package you just to need add it to your pubspec.yaml file.
selection :last version
After that import it where ever you want to use it.
import 'package:selection/selection.dart;
And finally like the blow codes use it to show user selection list to user.
ListSelection
ListSelection<String>(
//custom style for hint
boxDecoration: SelectionBoxDecoration(
hintStyle: const TextStyle(color: Colors.red)),
//custom style for modal
modalDecoration:
SelectionModalDecoration(btnBackGroundColor: Colors.red),
//the title of your selection box
title: 'Select multiple number',
//hint text that shows in selection box
hint: 'choose',
// these are the items that will be shown in modal
itemBuilder: (item, isSelected) =>
Text(
item,
style: TextStyle(
color: isSelected ? Colors.red : Colors.black),
),
//selection callback
selectCallBack: (itemsSelected) {},
//your items
items: const ['1', '2', '3', '4']);
copied to clipboard
SingleSelection
//show simple string
SingleSelection<String>(
//custom style for hint
boxDecoration: SelectionBoxDecoration(
hintStyle: const TextStyle(color: Colors.red)),
//the title of your selection box
title: 'Select one number',
//hint text that shows in selection box
hint: 'choose',
//when user choose this item will be shown in hint text. it must be string
showItemSelection: (item) => item,
// these are the items that will be shown in modal
itemBuilder: (item) => Text(item),
//selection callback
selectCallBack: (itemSelected) {},
//your items
items: const ['1', '2', '3', '4']);
SingleSelection<ModelTest>(
//custom style for hint
boxDecoration: SelectionBoxDecoration(
hintStyle: const TextStyle(color: Colors.red)),
//the title of your selection box
title: 'Select one number',
//hint text that shows in selection box
hint: 'choose',
//when user choose this item will be shown in hint text. it must be string
showItemSelection: (item) => item.title,
// these are the items that will be shown in modal
itemBuilder: (item) => Text(item.title),
//selection callback
selectCallBack: (itemSelected) {},
//your items
items:getTestModel);
copied to clipboard
NOTICE #
After setting SelectionBoxDecoration and SelectionModalDecoration you need to restart your app and if you just use hot reload you face to err.
You can contribute on github https://github.com/mjdarvishi
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
There are no reviews.