I use a multi-select
https://pub.dev/packages/multi_select_flutter/example
in a page like below (Properties+)
the multi-select has initialValue property which I could pass pre-selected items in them and it work in firt time of the loading of the page . I want to when I push on edit button in the page the multi-select will cosider new seleced items as pre-selected values and the selected items will change according to the new data.
MultiSelectDialogField(
items: _items,
initialValue: _selectedPorperties,
title: Text("Properties"),
selectedColor: Colors.blue,
decoration: BoxDecoration(
color: Colors.blue.withOpacity(0.1),
borderRadius: BorderRadius.all(Radius.circular(40)),
border: Border.all(
color: Colors.blue,
width: 2,
),
),
buttonIcon: Icon(
Icons.add,
color: Colors.blue,
),
buttonText: Text(
"Properties",
style: TextStyle(
color: Colors.blue[800],
fontSize: 16,
),
),
onConfirm: (results) {
_selectedPorperties = results;
},
)
_selectedPorperties is a dynamic list which I fill them after pushing on Edit button. in the body of Widget build(BuildContext context)
List<dynamic> _selectedPorperties = [];
Related
I'm using the MultiSelectDialogField widget, but I wanted the user to be able to select only one option, does anyone know if there's a way to do this with this widget?
Or if there is another widget with dialog that is more recommended?
MultiSelectDialogField(
searchable: true,
items: _itensStudent,
title: const Text("Students"),
selectedColor: Colors.black,
decoration: BoxDecoration(
border: Border.all(
color: theme.primaryColor,
width: 2,
),
),
isDismissible: false,
buttonText: Text(
"Select student",
style: TextStyle(
color: theme.primaryColor,
fontSize: 16,
),
),
chipDisplay: MultiSelectChipDisplay.none(),
onConfirm: (results) {
},
),
I need your help. I'm using dropdown_button2 from pub.dev but I've run into a few issues that I can't resolve. First mistake: how to change the text style of the selected element? I need the text that displays the selected item to be larger. The second mistake: you need to remove the bottom line, which is displayed under the selected element, when the element is not selected, there is no line, only the element is selected - the line appears. Below I have attached screenshots of what I have now and what I need to get in the end. I would appreciate your help.
dropdown
Widget build(BuildContext context) {
return Container(
width: 120,
decoration: BoxDecoration(
border: Border(
bottom: selectedValue != null
? const BorderSide(
color: constants.Colors.white,
)
: BorderSide.none,
),
),
child: DropdownButtonHideUnderline(
child: DropdownButton2(
hint: const Text(
'Select',
style: constants.Styles.bigBookTextStyleWhite,
),
items: widget.items
.map((item) => DropdownMenuItem<String>(
value: item,
child: Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: constants.Colors.white.withOpacity(0.1),
width: 1,
),
),
),
child: Center(
child: Row(
children: [
if (item == selectedValue)
const SizedBox(
width: 0,
),
Expanded(
child: Text(
item,
style: constants.Styles.smallTextStyleWhite,
),
),
if (item == selectedValue)
const Icon(
Icons.check,
color: constants.Colors.purpleMain,
),
],
),
),
),
))
.toList(),
value: selectedValue,
onChanged: (value) {
setState(() {
selectedValue = value as String;
});
},
icon: SvgPicture.asset(constants.Assets.arrowDropdown),
iconSize: 21,
buttonHeight: 27,
buttonElevation: 1,
itemHeight: 47,
dropdownMaxHeight: 191,
dropdownWidth: 140,
dropdownDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: constants.Colors.purpleMain,
),
color: constants.Colors.greyDark,
),
selectedItemBuilder: (context) {
return widget.items.map((item) {
return Center(
child: Text(
item,
style: constants.Styles.smallTextStyleWhite,
),
);
}).toList();
},
),
),
);
}
at the moment I have
should be the result
To change text style of the selected element use selectedItemBuilder. It's responsible for how the selected item will be displayed on button.
The bottom line under the selected element is shown by the decoration parameter you're using in the main Container widget. Remove it and bottom line should be gone.
I want to change the text color of the ListView with along with the Checkbox but can't change the text color dynamically with the ListView's onselected item?
I also add the color in the set State option but cant find the result I was lookin for.
here is my code:
ListView(
children: [
Text(
''' Categories''',
style: TextStyle(
color: Color(0xff181725),
fontSize: 24,
fontFamily: "Gilroy",
fontWeight: FontWeight.normal,
),
),
SizedBox(height: 13),
...checkBoxListOne.map(
(item) => ListTile(
onTap: () => onAllClicked(item),
leading: Checkbox(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
),
side: BorderSide(
color: Color(0xffC2C2C2),
width: 2,
),
activeColor: Color(0xff53B175),
value: item.value,
onChanged: (value) => onAllClicked(item),
),
title: Text(
item.title!,
style: TextStyle(
color: Color(0xff181725),
),
),
),
),
SizedBox(height: 40),
Text(
''' Brand''',
style: TextStyle(
color: Color(0xff181725),
fontSize: 24,
fontFamily: "Gilroy",
fontWeight: FontWeight.normal,
),
),
SizedBox(height: 13),
...checkBoxListTwo.map(
(item) => ListTile(
onTap: () => onAllClicked(item),
leading: Checkbox(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
),
side: BorderSide(
color: Color(0xffC2C2C2),
width: 2,
),
activeColor: Color(0xff53B175),
value: item.value,
onChanged: (value) => onAllClicked(item),
),
title: Text(item.title!),
),
),
],
),
and here is the setState part :
onAllClicked(CheckBoxModal ckbItem) { setState(() { ColoredBox( color: Color(0xff53B175), ); ckbItem.value = !ckbItem.value; }); }
You should add a field isSelected to the item objects in your checkBoxListOne list, and set/reset that field in the onTap of the item (item.isSelected = !item.isSelected), then call setState(){}. When you render the item, instead of activeColor: Color(0xff53B175) do something like activeColor: item.isSelected ? Color(0xff53B175) : Color(0xffffffff).
As a result of this change, the list is re-rendered whenever an item is tapped, and the color of the item when rendered is dependent on its 'tapped or not' state.
If you cannot (or don't want to) add a field, you can create a separate bool array of the same length as your checkBoxListOne list and use that to keep track of which item is selected.
Am trying to implement single selection on my listview.builder such that on tap of an item, the others get deselected and only the last taps gets selected. This is my logic but it does multiple selection for now and am stuck on how to make it single.
FlatButton(
onPressed: () {
setState(() {
_bloc.similarProducts[index].selected =
!_bloc.similarProducts[index].selected;
});
},
child: Container(
height: 45,
width:120,
decoration: BoxDecoration(
border: Border.all(
color:!_bloc.similarProducts
[index].selected?
Colors.white:
Hexcolor("#DADE66"),
),
borderRadius: BorderRadius.circular(7),
color: !_bloc.similarProducts[index].selected?
Hexcolor("#DADE66"):
Colors.white,
),
padding: EdgeInsets.all(12),
child: Padding(
padding: const EdgeInsets.only(left:15.0, right:15.0),
child: Center(
child: Text(
!_bloc.similarProducts[index].selected?
"Select": "Selected",
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 14,
fontFamily: 'Lato',
color: !_bloc.similarProducts
[index].selected?
Colors.white:
Hexcolor("#DADE66"),
),
),
),
),
),
),
],
);
}
),
If you want to select only one item you can make a new value, lets call it selectedItem.
then on the FlatButton onPressed callback set the selectedItem to the value of the item you want to select ( the value can be the index, id or any unique identifier maybe the item it self ).
And then you can check the value in every item on the list if it's equal to display what you want.
This way when you select new item the old one would be replace so you end up with only 1 selected.
I am having some issue changing the icon in a Filter chip in Flutter.
I would like to add a "+" when displaying the widget. Then, if the user selects the chip, then change the icon to a checkmark.
As you can see from the first picture, the icon is changed to a "check", but there is a white checkmark underneath.
How can I remove this extra checkmark?
Code Snippet
FilterChip(
avatar: selected.contains(ms.items[i].text)
? Icon(Icons.check, color: Palette.BLUE)
: Icon(Icons.add, color: Palette.GREY),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
side: BorderSide(
color: Palette.BLUE,
),
),
backgroundColor: Palette.WHITE,
padding: const EdgeInsets.all(8.0),
label: Text(
ms.items[i].text,
style: TextStyle(
fontSize: 16.0,
height: 1.4,
fontWeight: FontWeight.normal,
color: Palette.GREY,
),
),
Current Display
Desired Display
Initial display
You need to set showCheckmark to false. Also, change the border and text color according to the selection state.
FilterChip(
showCheckmark: false,
avatar: selected.contains(ms.items[i].text)
? Icon(Icons.check, color: Palette.BLUE)
: Icon(Icons.add, color: Palette.GREY),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
side: BorderSide(
color: selected.contains(ms.items[i].text)
? Palette.BLUE
: Palette.GREY,
),
),
backgroundColor: Palette.WHITE,
padding: const EdgeInsets.all(8.0),
label: Text(
ms.items[i].text,
style: TextStyle(
fontSize: 16.0,
height: 1.4,
fontWeight: FontWeight.normal,
color: selected.contains(ms.items[i].text)
? Palette.BLUE
: Palette.GREY,
),
),
selectedColor: Palette.WHITE,
onSelected: ...