Can a Dropdown Button:
return DropdownButton<String>(
items: <String>['Foo', 'Bar'].map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
}).toList(),
onChanged: (_) {},
);
have something similar to a decoration user in a TextFormField:
TextFormField(
controller: _titleController,
decoration: InputDecoration(labelText: 'Input'),
validator: (String value) {
if (value != null && value.isEmpty) {
return 'Please enter some text';
}
},
style: Theme.of(context).textTheme.title,
),
When something is written in the above TextFormField the word Input shows. Like this:
Replace DropdownButton with DropdownButtonFormField:
https://api.flutter.dev/flutter/material/DropdownButtonFormField-class.html
Change DropdownButton to DropdownButtonFormField and add this decoration....
decoration: InputDecoration(
filled: true,
fillColor: Hexcolor('#ecedec'),
labelText: 'Occupation',
border: new CustomBorderTextFieldSkin().getSkin(),
),
Copy Paste and see magic
I have done flutter dropdown with material design
Padding(
padding: const EdgeInsets.all(9.0),
child: InputDecorator(
decoration: InputDecoration(
labelText: 'Priority',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0)),
contentPadding: EdgeInsets.all(10),
),
child: ButtonTheme(
materialTapTargetSize: MaterialTapTargetSize.padded,
child: DropdownButton<String>(
hint: const Text("Priority"),
isExpanded: true,
value: dropdownValue,
elevation: 16,
underline: DropdownButtonHideUnderline(
child: Container(),
),
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue!;
});
},
items: <String>['One', 'Two', 'Free', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
),
),
Related
How to customize the appearance of a DropDownButton?
I would like to do a few things to make the drop down looks like a Text Entry:
remove the bottom line inside the yellow box
indent "Use Email" so it left aligns with "Email Address"
make the drop down the same size as the text box (default size)
put the down arrow close to the right hand side of the drop down
add borders
Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.yellow[600],
borderRadius: BorderRadius.circular(4),
),
child: DropdownButton(
value: DropDownValue,
icon: const Icon(Icons.keyboard_arrow_down),
items: DropDownItems.map((String DropDownItems) {
return DropdownMenuItem(
value: DropDownItems,
child: Text(DropDownItems),
);
}).toList(),
onChanged: (String? newValue) {
setState(() {
DropDownValue = newValue!;
if (DropDownValue == 'Use Email') {
RegisterType = 'Email';
} else {
RegisterType = 'Mobile';
}
});
},
),
),
SizedBox(height: 10),
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(), labelText: RegisterType),
controller: _EmailAddressController,
),
Try this code:
Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.yellow[600],
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(4),
),
child: DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: true,
child: DropdownButton(
value: DropDownValue,
icon: const Icon(Icons.keyboard_arrow_down),
items: DropDownItems.map((String DropDownItems) {
return DropdownMenuItem(
value: DropDownItems,
child: Text(DropDownItems),
);
}).toList(),
onChanged: (String? newValue) {
setState(() {
DropDownValue = newValue!;
if (DropDownValue == 'Use Email') {
RegisterType = 'Email';
} else {
RegisterType = 'Mobile';
}
});
},
),
),
),
),
SizedBox(height: 10),
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(), labelText: RegisterType),
controller: _EmailAddressController,
),
I've struggled to remove flutter's DropdownButton left padding so it can match the TextField below. Anyone can help?
Here's my code:
DropdownButton<MenuModel>(
itemHeight: itemHeight,
isExpanded: true,
underline: null,
value: currentValue,
hint: Text(placeholder, style: hintStyle),
style: textStyle,
disabledHint: Text(currentValue?.label ?? placeholder, style: textStyle),
onChanged: widget.modalMode ? null : _onChanged,
items: widget.listMenu.map<DropdownMenuItem<MenuModel>>((MenuModel val) {
return DropdownMenuItem<MenuModel>(
child: Text(val.label),
value: val,
);
}).toList(),
)
finally I've found the problem. So it happen because I wrapped the DropdownButton with ButtonTheme(alignedDropdown: true)
ButtonTheme(
alignedDropdown: true, // it's the culprit
child: DropdownButton<MenuModel>(
itemHeight: itemHeight,
isExpanded: true,
underline: null,
value: currentValue,
hint: Text(placeholder, style: hintStyle),
style: textStyle,
disabledHint: Text(currentValue?.label ?? placeholder, style: textStyle),
onChanged: widget.modalMode ? null : _onChanged,
items: widget.listMenu.map<DropdownMenuItem<MenuModel>>((MenuModel val) {
return DropdownMenuItem<MenuModel>(
child: Text(val.label),
value: val,
);
}).toList(),
),
)
Thanks for the help.
Try below code hope its helpful to you. refer Dropdown here. just change my widget to your widgets
Create variable and List of dropdown:
var selectedCategory;
List categoryDropDownList = [
'One',
'Two',
'Three',
'Four',
];
Your Widget:
DropdownButton(
isDense: true,
isExpanded: true,
hint: Text(
'Select Category',
style: TextStyle(
color: Colors.black,
fontSize: 15,
),
textAlign: TextAlign.center,
),
value: selectedCategory,
items: categoryDropDownList.map<DropdownMenuItem<String>>(
(value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value.toString(),
style: TextStyle(
fontSize: 17,
),
),
);
},
).toList(),
onChanged: (var value) {
setState(
() {
selectedCategory = value;
},
);
},
),
Your result Screen->
I have tried to use the same style as you are using and managed to get that done with the following code. I hope that works for you. I am attaching the screenshot as well of the output.
Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
DropdownButton<String>(
itemHeight: 50,
isExpanded: true,
underline: null,
value: dropdownValue,
hint: const Text('Honorific', style: TextStyle(color: Colors.grey)),
icon: const Icon(Icons.arrow_drop_down),
iconSize: 24,
elevation: 16,
style: const TextStyle(color: Colors.deepPurple),
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue!;
});
},
items: <String>['Honorific']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
TextFormField(
controller: controller,
validator: (value) {
if (value!.isEmpty || !value.contains('#')) {
return 'Please enter a valid email address';
}
return null;
},
textInputAction: TextInputAction.next,
keyboardType: TextInputType.emailAddress,
),
],
),
),
output
I'm working on a form in flutter with a DropdownButtonFormField. When the value of the dropdown menu is too long, it shows an overflow error, how can i make it scroll horizontally the way a normal textfield does?
Here is the code for the DropdownButtonFormField, Thanks in advance.
InputDecorator(
decoration: InputDecoration(
labelStyle: textStyle,
errorStyle: TextStyle(color: Colors.redAccent, fontSize: 16.0),
hintText: 'select expense',
border: OutlineInputBorder(borderRadius: BorderRadius.circular(5.0))),
isEmpty: _currentSelectedValue == null,
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
value: _currentSelectedValue,
isDense: true,
onChanged: (String newValue) {
setState(() {
_currentSelectedValue = newValue;
state.didChange(newValue);
});
},
items: _currencies.map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
),
Set the isExpanded property of DropdownButton to true.
Not sure what I'm missing. When selecting the value of drop-down, form onVaidate() fired which hence my other fields are showing the error. How can I stop it? Here is the code
Widget build(BuildContext context) {
// return Scaffold(
// appBar: AppBar(title: Text("Registration")),
// body: Center(child: Text(widget.user.displayName)),
// );
FirebaseUser user = widget.user;
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: Text("Registration"),
),
body: SafeArea(
top: false,
bottom: false,
child: Form(
key: _formKey,
autovalidate: true,
child: ListView(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
children: <Widget>[
TextFormField(
validator: (value) => value.isEmpty ? 'Name is Required' : null,
decoration: const InputDecoration(
icon: const Icon(Icons.person),
hintText: 'Enter your first and last name',
labelText: 'Name',
),
),
TextFormField(
decoration: const InputDecoration(
icon: const Icon(Icons.phone),
hintText: 'Enter a phone number',
labelText: 'Phone',
),
initialValue: user.phoneNumber,
enabled: user.phoneNumber == null,
keyboardType: TextInputType.phone,
validator: (value) => value.isEmpty ? 'Phone number is Required' : null
// inputFormatters: [
// WhitelistingTextInputFormatter.digitsOnly,
// ],
),
TextFormField(
decoration: const InputDecoration(
icon: const Icon(Icons.email),
hintText: 'Enter a email address',
labelText: 'Email',
),
initialValue: user.email,
enabled: user.email == null,
validator: (value) => value.isEmpty ? 'Email is Required' : null,
keyboardType: TextInputType.emailAddress,
),
TextFormField(
decoration: const InputDecoration(
icon: const Icon(Icons.remove_red_eye),
hintText: 'Enter the Password',
labelText: 'Password',
),
keyboardType: TextInputType.text,
obscureText: true,
validator: (value) => value.isEmpty ? 'Password is Required' : null
),
FormField(
builder: (FormFieldState state) {
return InputDecorator(
decoration: InputDecoration(
icon: const Icon(Icons.card_membership),
labelText: 'ID Type',
),
isEmpty: _profile.govId == null,
child: DropdownButtonHideUnderline(
child: DropdownButton(
value: _profile.govId,
isDense: true,
onChanged: (String newValue) {
setState(() {
_profile.govId = newValue;
state.didChange(newValue);
});
},
items: _govtIds.map((String value) {
return DropdownMenuItem(
value: value,
child: Text(value),
);
}).toList(),
),
),
);
},
),
TextFormField(
decoration: const InputDecoration(
icon: const Icon(Icons.confirmation_number),
hintText: 'Enter your Governmenr ID number',
labelText: 'ID Number',
),
keyboardType: TextInputType.datetime,
validator: (value) => value.isEmpty ? 'ID Number is Required' : null
),
FormField(
builder: (FormFieldState state) {
return InputDecorator(
decoration: InputDecoration(
icon: const Icon(Icons.business),
labelText: 'Block Info',
),
isEmpty: _profile.block == null,
child:
// Column(children: [RadioListTile(title: Text("A")),RadioListTile(title: Text("B"))]),
// Radio(
// value: 0,
// groupValue: _blocks,
// onChanged: (value){}),
DropdownButtonHideUnderline(
child:
DropdownButton(
value: _profile.block,
isDense: true,
onChanged: (String newValue) {
setState(() {
_profile.block = newValue;
state.didChange(newValue);
});
},
items: _blocks.map((String value) {
return DropdownMenuItem(
value: value,
child: Text(value),
);
}).toList(),
),
),
);
},
),
TextFormField(
decoration: const InputDecoration(
icon: const Icon(Icons.home),
hintText: 'Enter your Flat number',
labelText: 'Flat number',
),
inputFormatters: [LengthLimitingTextInputFormatter(3)],
validator: (value) {
if (value.isEmpty) {
return 'Flat number is Required';
} else if (_profile.isValidHouseNumber() == false) {
return 'Invalid flat number';
} else {
return null;
}
},
keyboardType: TextInputType.number,
onChanged:(value) {
_profile.houseNo = value;
},
),
Padding(
padding: EdgeInsets.fromLTRB(38.0, 30.0, 0.0, 0.0),
child: SizedBox(
height: 50.0,
child: FlatButton(
// elevation: 5.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
color: Colors.green,
child: Text('Submit',
style: TextStyle(fontSize: 20.0, color: Colors.white)),
onPressed: _validateAndSubmit,
),
))
],
))),
);
}
Call a method to return null in the validate fucntion all the other fields. That will clear the validation. It's a fix, but doesn't solve the problem.
There seems to be nothing wrong with the code above, can you add the code for the other fields too?
EDIT:
The reason all the other fields validate is because of the autovalidate: true property of the parent Form widget. Remove it and wrap each TextFormField with a Form with different keys.
For example, your TextFormField should look as follows:
Form(
key: _formKey[0],
child: TextFormField(
validator: (value) => value.isEmpty ? 'Name is Required' : null,
decoration: const InputDecoration(
icon: const Icon(Icons.person),
hintText: 'Enter your first and last name',
labelText: 'Name',
),
),
),
Wrap it with a Form, _formKey is declared as
List<GlobalObjectKey<FormState>> _formKey = new List(number_of_keys);
Call the respective setState like so:
_formKey[position].currentState.setState((){});
And don't forget to remove the parent Form widget.
I've one drop down and there some value inside the drop-down button and I need to by default selected value. you can seel below piece of snippet where you can find the drop-down value. I need it always there is by default selected value Normal. hope you understand the question.
FormBuilder(
autovalidate: autovalidate,
child: FormBuilderCustomField(
attribute: "Select Address",
validators: [
FormBuilderValidators.required(),
],
formField: FormField(
builder: (FormFieldState<dynamic> field) {
return InputDecorator(
decoration: InputDecoration(
errorText: field.errorText,
filled: false,
isDense: true,
border: InputBorder.none,
icon: Container(
width: 50.0,
height: 50.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: colorStyles['primary_light'],
),
child: Icon(
Icons.business_center,
color: colorStyles['primary'],
),
),
),
isEmpty: _typeValue == [],
child: new DropdownButtonHideUnderline(
child: DropdownButton(
hint: Text("Service Type"),
isExpanded: true,
items: [
"normal",
"urgent",
"emergency",
].map((option) {
return DropdownMenuItem(
child: Text("$option"),
value: option,
);
}).toList(),
value: field.value,
onChanged: (value) {
field.didChange(value);
_serviceType = value;
},
),
),
);
},
)),
);
Just Asign on initState()
selectedDropDownValue = "normal";
In DropDown, asign selectedDropDownValue to value, and update on onChanged callback
new DropdownButtonHideUnderline(
child: DropdownButton(
hint: Text("Service Type"),
isExpanded: true,
items: [
"normal",
"urgent",
"emergency",
].map((option) {
return DropdownMenuItem(
child: Text("$option"),
value: option,
);
}).toList(),
value: selectedDropDownValue, //asign the selected value
onChanged: (value) {
setState((){
selectedDropDownValue = value; //on selection, selectedDropDownValue i sUpdated
});
},
),
),
);