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
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) {},
)),
I have made text field and drop down list in flutter, I have used google sheets to save data from text field, for drop down list I do not know how to save the selected item in google sheet
SizedBox(height: 20.0),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
FontAwesomeIcons.house,
size: 25.0,
color: Colors.black,
),
SizedBox(width: 35.0),
DropdownButton(
// value: null,
isDense: true,
items: _accountType
.map((value) => DropdownMenuItem(
child: Text(
value,
style: TextStyle(
color: Colors.black,
),
),
value: value,
))
.toList(),
onChanged: (selectedAccountType) {
print('$selectedAccountType');
setState(() {
selectedType = selectedAccountType;
});
},
value: selectedType,
isExpanded: false,
hint: Text(
" أختــر المحافطة لاضـافة المنظومة فيها",
style: TextStyle(
color: Colors.black,
),
),
)
],
),
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(...)
]
)
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,
),
),
),
),