DropdownButton is always disabled - flutter

I'm putting a DropdownButton in a TileList's trailing, settings up the parameters shown in the docs to make it active, but It stays disabled regardless.
The ListTile is part of a ListView not included in the code below.
I set up setState() like the docs stated but no avail.
I am not able to find the root cause of this issue, no idea what's causing it.
I've tried enum with int as a value but it also didn't work.
...
final Store<AppState> store;
Units unit;
#override
void initState() {
super.initState();
unit = store.state.weatherState?.temperature?.unit;
}
...
enum Units {Celsius, Fahrenheit, Kelvin}
Widget _displayUnitsSettings({Store<AppState> store}) {
return ListTile(
dense: true,
enabled: true,
selected: true,
title: Text(
"Temperature Unit",
style: TextStyle(
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dotted,
fontSize: 14,
fontWeight: FontWeight.w700,
color: Colors.white),
),
subtitle: Text(
"Default: Celsius.\nAvailable units: Celsius, Fahrenheit, Kelvin.",
style: TextStyle(
fontSize: 9, fontWeight: FontWeight.w700, color: Colors.white54),
),
trailing: DropdownButton(
style: TextStyle(
fontSize: 14, fontWeight: FontWeight.w700, color: Colors.white54),
isDense: true,
value: unit,
onChanged: (value) {
store.dispatch(ChangeUnit(unit: value));
setState(() {
unit = value;
});
},
items: <DropdownMenuItem>[
DropdownMenuItem(
value: Units.Celsius,
child: Text("Celsius"),
),
DropdownMenuItem(
value: Units.Fahrenheit,
child: Text("Fahrenheit"),
),
DropdownMenuItem(
value: Units.Kelvin,
child: Text("Kelvin"),
),
],
),
);
}
...
EDIT: The DropdownButton seem to be enabled but I am unable to click it.

Here's the problem. You have an AppBar with no position after the ListView on a Stack. What this mean is that the AppBar is overlapping over your ListView and therefore intercepting the gestures on your DropdownButton.
Wrap your AppBar with a Positioned widget and it will work. Like this:
Positioned(
top: 0.0,
left: 0.0,
right: 0.0,
child: AppBar(
leading: _backButton(context),
backgroundColor: Colors.transparent,
elevation: 0,
),
),

Related

How to make showcase widget appear on top of text. I implemented it but its appearing beneath the text

I am implementing a showcase widget but I want to place the widget on top of the text. How can I achieve this?
This is the code:
Showcase(
key: keys,
overlayOpacity: 0,
overlayColor: Colors.transparent,
title: "New!",
titleTextStyle: TextStyle(fontSize: 12),
shapeBorder: const CircleBorder(),
showcaseBackgroundColor: Color(0xfffcecaf),
descTextStyle:
const TextStyle(fontWeight: FontWeight.bold, fontSize: 13),
description: "Tap to Learn more",
child: Container(
child: Text(
"xyz",
style: TextStyle(
fontSize: 20,
height: 1.2,
color: AppColors.PRIMARY_COLOR,
),
),
),
),

how to change default text color in ListView in flutter Dart?

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.

change the flutter dropdown to textalign left

how to make the dropdown to the left, because what i get is the dropdown in the middle
DropdownButton<String>(
value: _chosenValue2,
//elevation: 5,
style: TextStyle(color: Colors.black),
items: <String>[
'Personal Type',
'Other',
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
hint: Text(
"Customer Model",
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.w600),
),
onChanged: (String value) {
setState(() {
_chosenValue2 = value;
});
},
),
Try below code hope its helpful to you. Add your dropdown widget inside Container and set Alignment.centerLeft
Container(
// padding: EdgeInsets.all(5), if you required some padding to dropdown to set padding
alignment:Alignment.centerLeft,
child: DropdownButton<String>(
value: _chosenValue2,
//elevation: 5,
style: TextStyle(color: Colors.black),
items: <String>[
'Personal Type',
'Other',
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
hint: Text(
"Customer Model",
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.w600),
),
onChanged: (String value) {
setState(() {
_chosenValue2 = value;
});
},
),
),
Your result screen->
You could use quite a few approaches. You could wrap your drop-down widget in a Container or Align widget and set their alignment property to Alignment.bottomLeft or Alignment.centerLeft or Alignment.topLeft. You could also wrap your dropdown widget inside just a Container and then use margin property to move your widget like margin: EdgeInsets.only(right: 20) or to any value of your desire. Lastly, you could also wrap your widget with a Padding widget and set the padding property to an extent you want your drop-down widget to move leftwards like padding: const EdgeInsets.only(right: 50)

How to remove searchable dropdown default padding in flutter?

Hello this is my flutter widget SearchableDropdown, and it is wrapped using a container just for highlighting the border for understanding how much space the widget have been taken.
I want to reduce the padding/space of the SearchableDropdown widget around the text, and make the UI like this. How to do that?
new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
new Text(
'You are here',
style: GoogleFonts.poppins(
color: HexColor("#B8B8B8"), fontSize: 10),
textAlign: TextAlign.start,
),
new Container(
decoration: new BoxDecoration(
border: Border.all(color: Colors.red),
),
child: _searchableDropDown(context, providerData),
)
],
),
Widget _searchableDropDown(BuildContext context, HomePageProviderData data) {
return new SearchableDropdown.single(
hint: new Text(
data.currentCity,
style: GoogleFonts.poppins(
textStyle: TextStyle(
color: Color(0xFF373539),
fontSize: 16,
fontWeight: FontWeight.w600),
),
),
underline: SizedBox(),
displayClearIcon: false,
items: data.listCity.map((item) {
//
}).toList(),
onChanged: (String value) {
//
},
);
}
try use wrapping your dropdown inside SizedBox() like this :
SizedBox(
height: 20,
child: _searchableDropDown(context, providerData),
);
result:

How can I wrap RadioButtonGroup's label? Where can i give Expanded or Flexible?

In this project I have 10 questions and each questions have 4 options. each option is overflowing(flutter: Another exception was thrown: A RenderFlex overflowed by 196 pixels on the right.
). See My code below
//using RadioButtonGroup because question have 4 option
RadioButtonGroup(
labels: <String>[
que_list[index]['option_list'][0],
que_list[index]['option_list'][1],
que_list[index]['option_list'][2],
que_list[index]['option_list'][3]
],
labelStyle: TextStyle(
fontSize: 15,
fontWeight: FontWeight.normal,
color: Colors.white
),
onChange: (String label, int index) {},
onSelected: (String selected) {
print(selected);
},
activeColor: Colors.white,
),
I tried above code and also give Column and Container to the RadioButtonGroup but no change occurs. Can anyone help me sort this out?
Thanks
Maybe this will help you:
return Scaffold(
appBar: AppBar(
title: Text('First Route'),
),
body: Center(
child: Container(
color: Colors.blue,
child: RadioButtonGroup(
labels: <String>[
"que_list[index]['option_list'][0] que_list[index]['option_list'][0]",
"que_list[index]['option_list'][1]",
"que_list[index]['option_list'][2]",
"que_list[index]['option_list'][3]"
],
labelStyle: TextStyle(
fontSize: 15,
fontWeight: FontWeight.normal,
color: Colors.white),
onChange: (String label, int index) {},
onSelected: (String selected) {
print(selected);
},
activeColor: Colors.white,
itemBuilder: (Radio radioButton, Text label, int index) {
return Row(children: [radioButton, Flexible(child: label)]);
}
)),
));