flutter package for multi select
Home Page: https://pub.dev/packages/flutter_multi_select_items
I am also an open-source enthusiast and maintainer and love to share them with the community. so there are a few open-source software and plugins available on my Github.
Languages
Libraries & Frameworks
Platforms & Tools
Designing
Add a function to consider the selected items with that function. Why?> Because, for example, he selected once and saved it. Next time, I should say that they will be activated by default with a function and call the control.
controller: _controller,
items: List.generate(
optionLength.length,
(index) => CheckListCard(
value: mySnapshot
.docs[_counter.value]
['options'][index]
.toString(),
title:
Text(mySnapshot
.docs[
_counter
.value][
'options'][index]),
selected:
getSelectedOptions(
mySnapshot,
index,
),
selectedColor: Colors.white,
checkColor: Colors.amber,
checkBoxBorderSide:
BorderSide(
color:
Colors.amber),
decorations: MultiSelectItemDecorations(
decoration:
BoxDecoration(
color: Colors
.amber
.withOpacity(
0.1)),
selectedDecoration:
BoxDecoration(
color: Colors
.amber
.withOpacity(
0.8))),
shape:
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(
5),
),
),
),
onChange: (allSelectedItems,
selectedItem) {
}),
I try to test it on Mac but itsn't works
Using the example you gave for the previous issue - on how to have the cards be laid onto into a single scrollable row:
showInListView: true,
listViewSettings: ListViewSettings (
scrollDirection: Axis.horizontal,
separatorBuilder: (_, __){
return SizedBox(width: 10,);
}
),
This results in the cards all stretching to the same fixed height, and thus if one adjusts any of the cards' properties like contentPadding or fontSize etc, then the card's text starts getting clipped and positioned funny etc, as the card wants to have a larger height but is being squashed/stretched ... using SizedBox around MultiSelectContainer maybe can adjust the height for all, but this doesn't allow tags of variable sizes, which happens to be the use-case :).
if this is supported?
Hi ,
when i press on row the row is selected and also leadingCheckBox selected as well ,
but when i hit on (leadingCheckBox) only the row doesn't updating
`Expanded(
flex: 5,
child: MultiSelectCheckList(
isMaxSelectableWithPerpetualSelects: true,
// maxSelectableCount: 5,
textStyles: const MultiSelectTextStyles(
selectedTextStyle: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold)),
itemsDecoration: MultiSelectDecorations(
selectedDecoration: BoxDecoration(
color: Colors.indigo.withOpacity(0.8))),
listViewSettings: ListViewSettings(
separatorBuilder: (context, index) =>
const Divider(
height: 0,
)),
controller: _controller,
items: List.generate(
controller.packagesList.value.data?.length ?? 0,
(index) => CheckListCard(
leadingCheckBox: true,
enabled: true,
value: controller
.packagesList.value.data?[index] ??
PackageData(),
title: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(controller
.packagesList
.value
.data?[index]
.title?[langCode] ??
""),
Column(
children: [
Text(
"${controller.packagesList.value.data?[index].price.toString() ?? ""}EGP/${controller.packagesList.value.data?[index].priceType ?? ""}",
),
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: <Widget>[
ElevatedButton(
style:
ElevatedButton.styleFrom(
backgroundColor:
Colors.white),
onPressed: () {
controller.incement(index);
},
child: const Icon(Icons.add,
color: Colors.black87),
),
const SizedBox(
width: 10,
),
Obx(() => Text(
'${controller.numberOfItems[index]}',
style: const TextStyle(
fontSize: 18.0),
)),
const SizedBox(
width: 10,
),
ElevatedButton(
style:
ElevatedButton.styleFrom(
backgroundColor:
Colors.white),
onPressed: () {
controller.decrement(index);
},
child: const Icon(
Icons.remove,
color: Colors.black87,
),
)
],
),
],
),
],
),
subtitle: Text(
"${controller.packagesList.value.data?[index].points.toString() ?? ""} Points "),
selectedColor: Colors.white,
checkColor: Colors.indigo,
// selected: index == 1,
checkBoxBorderSide:
const BorderSide(color: Colors.blue),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(5)))),
onChange: (List<PackageData?> allSelectedItems,
PackageData? selectedItem) {
controller.setSelectedPackageData(
selectedItem, allSelectedItems);
},
onMaximumSelected:
(List<PackageData?> allSelectedItems,
PackageData? selectedItem) {
// CustomSnackBar.showInSnackBar(
// 'The limit has been reached', context);
},
));`
Can we add a parameter which takes a list of Preselected values and match them with the values and have them Selected by default when the user opens the multi_select checkbox list or chips.
i set THE selected is true, code like this, but it not work!
items.add(MultiSelectCard( value: itemData, label: βAllβοΌ enabled: true, selected: true, ));
I'm changing the label for a MultiSelectCard within a setState call within the MultiSelectContainer's onChange call. When I debug, I can see that build is being called, and a new MultiSelectContainer is being created, with the relevant MultiSelectCard being given the new value for its value, yet the UI doesn't change and still shows the old value (and presumably is still somehow showing the old MultiSelectCard even though I can see a new one was created with the correct new value).
When the page is loaded for the first time, I bring some values selected, as soon as I call setState() anywhere, the selected values are selected as many times as I use setState()
MultiSelectContainer<String>(
itemsDecoration: MultiSelectDecorations(
decoration: BoxDecoration(color: Colors.grey[100], border: Border.all(color: Colors.grey[100]!), borderRadius: BorderRadius.circular(20)),
),
suffix: MultiSelectSuffix(
selectedSuffix: const Padding(
padding: EdgeInsets.only(left: 5),
child: Icon(
Icons.check,
color: Colors.white,
size: 14,
),
),
),
itemsPadding: const EdgeInsets.all(5),
items: getStatusItem(),
onChange: (allSelectedItems, selectedItem) {
_selectedStatus.clear();
_selectedStatus = allSelectedItems;
},
);
List<MultiSelectCard<String>> getStatusItem() {
List<MultiSelectCard<String>> items = [];
for (var stt in status) {
items.add(MultiSelectCard(value: stt, label: stt, selected: _selectedStatus.any((element) => stt == element)));
}
return items;
}
The code I used on the page is above.
Hi, when i use this package, it give me this error during complie time.
Doctor summary (to see all details, run flutter doctor -v):
[β] Flutter (Channel stable, 2.8.0, on Microsoft Windows [Version 10.0.19043.1348], locale en-US)
[β] Android toolchain - develop for Android devices (Android SDK version 31.0.0-rc5)
[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[!] Android Studio (not installed)
[β] IntelliJ IDEA Community Edition (version 2021.1)
[β] Connected device (2 available)
! Doctor found issues in 2 categories.
I found the solution which works for me kindly check the attachment.
How to assign some default selected value for the multi dropdown
Hello, i have trouble with this package. After hot restart application my multiselect can't show and this trouble always repeat. Any solutions?
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google β€οΈ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.