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(...)
]
)
Related
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) {},
)),
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
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
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:
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,
),
),
),
),