Currently, I can only use independent radio buttons to realize my desired layout.
But, I need to have the shown radio buttons with different options (option 1 - 6) and only allow single select across the page and have this selection accessible when clicking the button.
How can I realize this in flutter(flow)? Do I need a custom function?
Thanks!
I also tried check boxes but there I have basically the same problem to realize single select.
You can enforce a single selection mode on your radio buttons by setting the groupValue property. This here gives you an example for two radio buttons provided you store the currently selected value in some property int? _selectedValue.
You can change the type of course, I used an integer for this example. More info can be found in the documentation of the Radio class.
return Column(
children: <Widget>[
ListTile(
title: const Text('Value 1'),
leading: Radio<int>(
value: 1,
groupValue: _selectedValue,
onChanged: (int? value) {
setState(() {
_selectedValue = value;
});
},
),
),
ListTile(
title: const Text('Value 2'),
leading: Radio<int>(
value: 2,
groupValue: _selectedValue,
onChanged: (int? value) {
setState(() {
_selectedValue = value;
});
},
),
),
],
);
Related
I'm trying to make a pair of dropdown buttons that take their items from the same list, and selecting a value in one disables it in the other one, and vice versa (much like Translators software, or conversions, as this example is the second one).
I tried the onChanged methods but they only worked when checking the list AFTER changing its value (i.e, list 2's value was still showing up on list 1 until I changed list 1's value, and vice versa).
Here's the list
const List<String> tipolong = <String>['mi', 'km', 'fur', 'hm', 'ch', 'dam', 'rd', 'm', 'yd', 'ft', 'dm', 'in', 'cm', 'mm'];
And here are the two Dropdown buttons with their respective derivatives of said list
tipolong2 = List.from(tipolong);
tipolong3 = List.from(tipolong);
class _DropdownButtonState extends State<DropdownButton> {
#override
Widget build(BuildContext context) {
return DropdownButton<String>(
value: dropdownValueLength1,
icon: const Icon(Icons.arrow_downward),
elevation: 16,
style: const TextStyle(color: Colors.deepPurple),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: (String? newValue) {
// This is called when the user selects an item.
setState(() {
dropdownValueLength1 = newValue!;
tipolong3 = List.from(tipolong);
tipolong3.remove(dropdownValueLength1);
});
},
items: tipolong2.map((dropdownValueLength1) {
return DropdownMenuItem<String>(
value: dropdownValueLength1,
child: Text(dropdownValueLength1),
);
}).toList(), );
}
}
class _DropdownButtonState2 extends State<DropdownButton2> {
#override
Widget build(BuildContext context) {
return DropdownButton<String>(
value: dropdownValueLength2,
icon: const Icon(Icons.arrow_downward),
elevation: 16,
style: const TextStyle(color: Colors.deepPurple),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: (String? newValue) {
// This is called when the user selects an item.
setState(() {
dropdownValueLength2 = newValue!;
tipolong2 = List.from(tipolong);
tipolong2.remove(dropdownValueLength2);
});
},
items: tipolong3.map((dropdownValueLength2) {
return DropdownMenuItem<String>(
value: dropdownValueLength2,
child: Text(dropdownValueLength2),
);
}).toList(), );
}
}
How can I make it so that when I choose an item in the first list, it is removed or disabled from the second one, and vice versa? So far I've tried the onTap and onChanged methods but they both work only on my second time checking the list (the one that should disappear does so, but after I popped up the list for a second time instead of the first one).
Sorry if my explanation is not clear.
You can check that is user selected from 1st dropdown then disable 2nd dropdown and vice-a-versa
You can use IgnorePointer to achieve your functionality
1st onChanged > Item Selected > store it in var A
Check var A is not empty > Disable 2nd DropDown and same for reverse
I would like to update when the value of radio button changes in flutter But its slowing down the app.
I have created the following listview with the radio buttons yes and no
final List<ItemModel> _questions =
List.generate(100, (index) => ItemModel(name: 'nm_$index', id: index + 1, checked: ''));
ListTile(
title: Text((index + 1).toString() + ". " + question.name),
subtitle: Column(
children: [
ListTile(
onTap: () {
setState(() {
_questions[index].checked = 'yes';
});
},
title: const Text("Yes"),
leading: Radio(
value: 'yes',
groupValue: question.checked,
onChanged: (val) {
setState(() {
_questions[index].checked = 'yes';
});
}),
),
ListTile(
title: const Text("No"),
onTap: () {
setState(() {
_questions[index].checked = 'no';
});
},
leading: Radio(
value: 'no',
groupValue: question.checked,
onChanged: (val) {
setState(() {
_questions[index].checked = 'no';
});
}),
)
],
));
The above listview has two radio buttons where each row is either marked as yes or no. It works well for a small list but when the list gets larger like the above with 100 items the app starts to slow down. I believe its caused by the calling of setState on each radio button click which then causes the ui to be rebuilt.
Is there a way i can update the status of the selected radio without causing the ui to rebuild or is there a way i can improve the above to make the app stop lagging and slowing down when there is alot of items.
I am new to Flutter, I want to create a dropdown list of icons and text in TextformField in Flutter. Like bank icon with its name. Please see the screenshot and suggest me any code. Thank you in advance. Please help.
Probably use DropdownButton class, https://api.flutter.dev/flutter/material/DropdownButton-class.html
On the documentation page you can see there is an example code that does not include an Icon.
You can add an icon to the dropdown items by changing the items parameter to have a Row wrapping an Icon and Text widget.
See: https://dartpad.dev/b742bde3465a616f8787c434415c9e3e?null_safety=true
items: <String>['One', 'Two', 'Free', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Row(
children: [
Icon(Icons.close),
Text(value),
],
),
);
}).toList(),
...
//custom object
class Item{
String name; //set the item name
Icon icon; //set corresponding icon
}
Item selectedItem;
List<Item> itemList = []; //create a list of the items, you need to add items into it first
DropdownButton<Item>(
isExpanded: true,
hint: new Text("Select Item"),
value: selectedItem ,
icon: Icon(Icons.arrow_drop_down_circle),
iconSize: 24,
elevation: 16,
style: TextStyle(color: Colors.blueAccent),
underline: Container(
height: 2,
color: Colors.blue,
),
onChanged: (Item newValue) {
setState(() {
selectedItem = newValue;
});
},
items: itemList.map<DropdownMenuItem<Item>>((Item value) {
return DropdownMenuItem<Item>(
value: value,
child: Row(
//set alignment here
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(value.icon), //in here you can display the icon
Text(value.name), //name of the item
],
);
}).toList(),
)
I had to create 50 drop down. I used 50 variables. and 50 drop down. Is it possible to do it less code with best practice?
50 drop down button I created
DropdownButton<String>(
underline: SizedBox(),
value: selectSun,
iconEnabledColor: Palette.darkSilver,
onChanged: selectSun == 'Close'?null:
((value) {
setState(() {
selectSun = value;
});
}),
items: status.map((String value) {
return DropdownMenuItem<String>(
value: value,
child: CustomText(
text: value,
textColor: Palette.redButton,
),
);
}).toList(),
),
and also 50 variables
String selectSunFromHour = '09';
and also I set these data to firebase. I set one by one
You can try this:
Column(
children: languages.map<DropdownButton<String>>((String value) {
return DropdownButton<String>(
// Dropdown button init here, value is from languages
);
}).toList(),
),
I wanted to control a drop-down button and make it unclickable using a button.
Is there any way to make it disable. Basically not allowing it able to change.
new DropdownButton(
value: animalName,
items: animals.map(
(String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text('$value'),
);
},
).toList(),
onChanged: (value) {
setState(() {
animalName = value;
});
},
),
So this is the code I currently use on the drop-down button, but i cant disabled it.
Found this in the DropdownButton docs:
If items or onChanged is null, the button will be disabled, the down arrow will be grayed out, and the disabledHint will be shown (if provided)
DropdownButton(
onChanged: null,
items: [...],
)
This isn't what you want to hear, but I don't think there's currently an easy way. I experimented with simply removing all the items and that causes a nice little crash. Maybe worth raising an issue with the flutter people on github...
There is an alternative that may be good enough for you for now. If you wrap your DropdownButton in an IgnorePointer, when you want it to be disabled you can change IgnorePointer's ignoring property to true.
That way if the user taps on it, it won't do anything.
But you'll probably want to indicate to the user somehow that it's disabled as well, something like setting the hint text (as it's grey).
child: new IgnorePointer(
ignoring: true,
child: new DropdownButton(
hint: new Text("disabled"),
items: ["asdf", "wehee", "asdf2", "qwer"].map(
(String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text('$value'),
);
},
).toList(),
onChanged: (value) {},
),
You can make DropdownButtonFormField or DropdownButton disabled if set onChanged to null, and if you want that dropdown still shows selected value you must set disabledHint. For example:
DropdownButtonFormField<String>(
disabledHint: Text(_selectedItem),
value: _selectedItem,
onChanged: enabled ? (value) => setState(() => _selectedItem = value) : null,
items: items.map<DropdownMenuItem<String>>((item) {
return DropdownMenuItem(
value: item,
child: Text(item),
);
}).toList(),
)
Just wrap it with IgnorePointer widget to make DropdownButton disable
IgnorePointer(
ignoring: enabled,
child: new DropdownButton(
value: animalName,
items: animals.map(
(String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text('$value'),
);
},
).toList(),
onChanged: (value) {
setState(() {
animalName = value;
});
},
),
);
If items or onChanged is null, the button will be disabled, the down
arrow will be grayed out, and the disabledHint will be shown (if
provided)
So something like this should work:
DropdownButton<String>(
...
onChanged: this.enabled ? (id) => setState(() => this.id = id) : null,
)
okay, i found a trick that satisfied me
i wanted it hide/show the DropdownButton depending on CheckboxListTile
in StatefulWidget Class
first create a function ex:
_buildDropDown(bool enable) {
if (enable) {
return DropdownButton<String>(
hint: Text("Hint"),
items: <String>[
'item 1',
'item 2',
'item 3',
].map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
}).toList(),
onChanged: (value) {},
);
} else { // Just Divider with zero Height xD
return Divider(color: Colors.white, height: 0.0);
}
}
and now in build
bool enable = true;
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
CheckboxListTile(
title: const Text('Switcher'),
selected: true,
value: enable,
onChanged: (bool value) {
setState(() {
enable = value;
});
},
),
_buildDropDown(enable),
],
);
}
now every time you change enable it will display and hide the DropdownButton
DropdownButtonFormField(
onChange: isDisable ? null : (str){
},
disabledHint: isDisable ? null : Text('Your hint text'),
...
)
For disable
onChange: null
For disable Caption
disabledHint: Text('Your hint text')
//add widget'AbsorbPointer' true-disable,false-enable
// isEditable = ture
AbsorbPointer(
absorbing: isEditable
DropdownButton(
onChanged: null,
items: [...],
)
)
Simple:
decoration:InputDecoration(enabled: false),