RadioListTile inside Listview.builder index in flutter - flutter

I want to set the index of RadioListTile inside the listview.builder but i can't do that how to do it which I want to get the value of this index here is my code
int _value=0;
List valueList=[];
ListView.Builder(itemBuilder:(context,index){
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: RadioListTile<int>(
dense: true,
activeColor: colorsCheck(),
contentPadding:
EdgeInsets.symmetric(horizontal: 1.0),
title: Text(
'Present',
style: TextStyle(
color: Colors.white, fontSize: 12.0),
),
value: 1,
groupValue: _value,
onChanged: (value) {
setState(() {
_value=value;
valueList.add(value);
print('radio button value present ${valueList.toList().toString()}');
});
},
),
),
Expanded(
child: RadioListTile<int>(
contentPadding:
EdgeInsets.symmetric(horizontal: 1.0),
dense: true,
activeColor: colorsCheck(),
title: Text(
'Absent',
style: TextStyle(
color: Colors.white, fontSize: 12.0),
),
value: 2,
groupValue: _value,
onChanged: (value) {
setState(() {
_value=value;
valueList.add(value);
print('radio button value absent ${valueList.toList().toString()}');
});
},
),
),
Expanded(
child: RadioListTile<int>(
dense: true,
activeColor: colorsCheck(),
contentPadding:
EdgeInsets.symmetric(horizontal: 1.0),
title: Text(
'Leave',
style: TextStyle(
color: Colors.white, fontSize: 12.0),
),
value: 3,
groupValue:_value,
onChanged: (value) {
setState(() {
_value=value;
valueList.add(value);
print('radio button value leave ${valueList.toList().toString()}');
});
},
),
),
],
),
}
Row is inside card where 3 radio button is set (present, absent, leave) but when I click it changes all item builder value. I just want to change the value of that radio inside the card which it clicks. other not. here is an image ...
look inside the picture where the leave radio button is set only top value but it set all.

set index in radiotilelist inside listview.builder
currentStatus = List<int>.filled(data.length, initialValue);
groupValue: currentStatus[index];
currentStatus[index] = newStatus

Related

How to create the switch button in a flutter?

In flutter, how to create a switch button and text in a row. I tried but didn't get what I wanted. And how to remove the tag inside the custom switch.
import 'package:custom_switch/custom_switch.dart';
bool status = true;
Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 40),
child: CustomSwitch(
activeColor: Color(0xff771ae1),
value: status,
onChanged: (value) {
setState(() {});
},
),
SizedBox(height: 12.0,),
Text('Value : $status', style: TextStyle(
color: Colors.black,
fontSize: 20.0
),)
),
],
),
You can use SwitchListTile widget. For your case, you need to use CupertinoSwitch.
CupertinoListTile(
title: Text("title"),
trailing: CupertinoSwitch(
value: true,
thumbColor: Colors.white,
activeColor: Colors.deepPurple,
// trackColor: ,
onChanged: (value) {},
)),

flutter: how to stop dropdown button text from moving with different length

So I have a dropdown button, but the item text has different length, so when I choose different item, the text moves to a different position like shown in the picture. How should I fix that?
Here is the code:
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
DropdownButton<TaskAssort>(
value: _selected,
icon: const Icon(Icons.arrow_drop_down),
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.black,
decoration: TextDecoration.none,
),
isExpanded: true,
onChanged: (TaskAssort? v) {
_selected = v!;
setState(() {});
},
items: [
DropdownMenuItem(
value: TaskAssort.Unfinished,
child: Text(getAssortText(TaskAssort.Unfinished),
textAlign: TextAlign.end),
),
DropdownMenuItem(
value: TaskAssort.UnfinishedDaily,
child: Text(getAssortText(TaskAssort.UnfinishedDaily),
textAlign: TextAlign.end),
),
DropdownMenuItem(
value: TaskAssort.Histroy,
child: Text(getAssortText(TaskAssort.Histroy),
textAlign: TextAlign.end),
),
]),
],
),
Set alignment of DropdownButton
alignment: Alignment.centerRight

how to display remember me and forget password buttons on the same line.- flutter

I want to display remember me button and the forget password text in a same line. how can I do this. image is showing my implementation so far. appreciate your help on this
CheckboxListTile(
title: const Text(
"Remember Me",
style: TextStyle(
color: textGrey, fontFamily: "Dubai", fontSize: 14),
),
value: checkedValue,
onChanged: (newValue) {
FocusManager.instance.primaryFocus?.unfocus();
setState(() {
if (isLoading != true) {
checkedValue = newValue!;
print(newValue);
}
});
},
contentPadding: EdgeInsets.only(left: 0, top: 0),
controlAffinity:
ListTileControlAffinity.leading, // <-- leading Checkbox
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextButton(
child: Text(
"Forget Password",
style: TextStyle(
color: textGrey, fontFamily: "Dubai", fontSize: 14),
),
onPressed: () {
//Get.to(ForgetPassword());
},
)
],
),
You can try this, it's solve my problem.
Create a row
Wrap CheckboxListTile with sizedbox
Add width to the SizedBox
Add SizedBox into a this row
An example:
Row(
children [
SizedBox(
width: ..
height: ..
child: CheckboxListTile(...)
),
Text(...)
]
)

flutter drop-down list - retrieve selected value and not in a box format

I have made a drop-down list as in the following screen
enter image description here
Here:
I want the drop-down to be in a box like other TextFormFields and arrow to be bigger
my drop-down list background seems to be blurred and not visible
I want the selected value to be replaced on "Choose the id proof"
Following is my code:
Container(
padding: EdgeInsets.symmetric(horizontal: 20),
color: Colors.white,
child: _hintDown(),
),
SizedBox(height: 10),
my dropdown code is:
DropdownButton _hintDown() => DropdownButton<String>(
items: [
DropdownMenuItem<String>(
value: "1",
child: Text(
"Aadhar Card",
),
),
DropdownMenuItem<String>(
value: "2",
child: Text(
"Pancard",
),
),
],
onChanged: (value) {
print("value: $value");
},
hint: Text(
"Choose the id proof!",
style: TextStyle(
color: Colors.black,
),
),
);
Is this code enough or do I need to go for some other?
There are certain changes in the code as per the requirements. You must visit the flutter documentation and read about using DropdownButton class to achieve what you want
See the code clearly, and implement the code in your code base
// look at the comments too to understand the functionality
String dropdownValue = 'Choose the id proof!';
// Return a widgt container to give the border
// and then wrap it around your DropdownButton
Widget _hintDown() => Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(8.0)
),
child: Padding(
padding: EdgeInsets.all(5.0),
child: DropdownButton<String>(
value: dropdownValue,
icon: Icon(Icons.arrow_drop_down),
iconSize: 30, //this inicrease the size
elevation: 16,
style: TextStyle(color: Colors.black),
// this is for underline
// to give an underline us this in your underline inspite of Container
// Container(
// height: 2,
// color: Colors.grey,
// )
underline: Container(),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>['Choose the id proof!', 'Adhaar Card', 'Pancard', 'Voter card', 'Passport']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
)
)
);
Result

Flutter Align TextFormField with DropdownButton

I have the following code that renders a ListTile with a TextFormField and a ListTitle with a DropdownButton.
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new Expanded(
child: ListTile(
dense: true,
title: Text(
"Property Name",
style: TextStyle(fontWeight: FontWeight.bold),
),
subtitle: TextFormField(
decoration: InputDecoration(
labelText: 'Enter the property name'
),
),
isThreeLine: true,
)
),
new Expanded(
child: ListTile(
dense: true,
title: Text(
"Contact Name",
style: TextStyle(fontWeight: FontWeight.bold),
),
subtitle: DropdownButton<int>(
items: [
DropdownMenuItem<int>(
value: 1,
child: Text(
"John Smith",
),
),
DropdownMenuItem<int>(
value: 2,
child: Text(
"Jon Doe",
),
),
],
onChanged: (value) {
setState(() {
_value = value;
});
},
value: _value,
hint: Text(
"Select Contact Name",
style: TextStyle(
color: Colors.black,
),
),
),
isThreeLine: true,
)
),
],
),
but it produces the following:
Is there a way to align the Contact Name's DropdownButton bottom line to the Property Name's ListTile? Any ideas?
1. Use DropdownButtonFormField
As for me, I rather choose to replace Dropdown widget with DropdownButtonFormField
change this
child: ListTile(
dense: true,
title: Text(
"Contact Name",
style: TextStyle(fontWeight: FontWeight.bold),
),
subtitle: DropdownButton<int>( // change this
items: [
...
into this
child: ListTile(
dense: true,
title: Text(
"Contact Name",
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
subtitle: DropdownButtonFormField<int>( // into this
decoration: InputDecoration(
isDense: true,
hasFloatingPlaceholder: true,
labelText: 'Select Contact Name',
contentPadding: EdgeInsets.symmetric(vertical: 9),
),
items: [
...
2. Remove hint params
secondly, as we move 'Select Contact name' to label Text inside InputDecoration, we can remove these lines :
hint: Text(
"Select Contact Name",
style: TextStyle(
color: Colors.black,
),
),
3. Comparison
We can discover three options that we already have in image below.
at the first row, it is solution proposed by KeykoYume
at the second row, it is solution proposed by Abhilash Chandran
at the last row, it is new solution proposed by me
Take note, that the third row also automatically handle overflows nicely
Padding your dropdown button with top inset could help as shown below.
subtitle: Padding(
padding: const EdgeInsets.only(top: 19.0),
child: DropdownButton<int>(
items: [
DropdownMenuItem<int>(
value: 1,
child: Text(
"John Smith",
),
),
DropdownMenuItem<int>(
value: 2,
child: Text(
"Jon Doe",
),
),
],
onChanged: (value) {
// setState(() {
// _value = value;
// });
},
value: 1,
hint: Text(
"Select Contact Name",
style: TextStyle(
color: Colors.black,
),
),
),
),