I'm having the following code statement.
Container(
height: 50,
padding: const EdgeInsets.only(left: 16, right: 16),
child: DropdownButtonFormField(
isExpanded: true,
validator: (value) => value == 0 ? errorMessage : null,
items: items
.map((e) => DropdownMenuItem(
child: Text(e,
overflow: TextOverflow.visible,
style: Style.poppinsRegularTextStyleWith(
fontSize: 14, color: color12)),
value: items.indexOf(e)))
.toList(),
value: selectedIndex,
onChanged: (value) {
setState(() {
selectedIndex = value;
if (onChanged != null) {
onChanged(items[value]);
}
});
},
),
)
After submitting the form the dropdown that has error message becomes unresponsive to tap, what i'm doing wrong?
How should i change the validator or what other fix is there for this
Can you replace the code with it
DropdownButtonFormField(
isExpanded: true,
validator: (value) => value == 0 ? errorMessage : null,
items: items.map((e) {
return DropdownMenuItem(
value: e,
child: Text(e),
);
}).toList(),
onChanged: (value) => setState(() {
if (onChanged != null) {
onChanged(items[value]);
}
})),
I am using DropdownButtonFormField in my code and it works perfect it is like;
DropdownButtonFormField(
value: _currentSugars ?? userData.sugars,
items: sugars.map((sugar) {
return DropdownMenuItem(
value: sugar,
child: Text('$sugar sugars'),
);
}).toList(),
onChanged: (val) => setState(() => _currentSugars = val),
),
The issue was the extra height on the container, making the dropdown and error message, this was causing some overlap and the tappable area wasn't there anymore.
**height: 50, <= Issue was here**
padding: const EdgeInsets.only(left: 16, right: 16),
child: DropdownButtonFormField(
isExpanded: true,
validator: (value) => value == 0 ? errorMessage : null,
items: items
.map((e) => DropdownMenuItem(
child: Text(e,
overflow: TextOverflow.visible,
style: Style.poppinsRegularTextStyleWith(
fontSize: 14, color: color12)),
value: items.indexOf(e)))
.toList(),
value: selectedIndex,
onChanged: (value) {
setState(() {
selectedIndex = value;
if (onChanged != null) {
onChanged(items[value]);
}
});
},
),
)```
Related
I have layout issues because the text from the dropdown menu that you choose can't fit inside the TextFormField and I can't seem to fix this issue. I have tried adding the overflow: TextOverflow.ellipsis property but that only changes for the dropdown labels, still when I choose one, they can't fit inside the TextFormField.
When you press the dropdown button, it shows like this:
and with the TextOverflow.elipsis property:
which is fine, but I still have the layout issue because of the chosen text that is now displayed inside the textformfield:
How can I add the same property to the TextFormField, or any sort of solution to this issue?
The code:
Row(
children: [
Expanded(
child: DropdownButtonFormField<String>(
decoration:
kTextFieldDecoration.copyWith(
hintText: 'Legal status',
labelText: 'Legal status',
),
value: _legalStatus,
items: [
'Sole proprietorship',
'Partnerships',
'Limited Liability Company (LLC)',
'Corporation',
'Small Business Corporation (S-Corporation)'
]
.map((label) => DropdownMenuItem(
child: Text(
label.toString(),
),
value: label,
))
.toList(),
onChanged: (value) {
setState(() {
_legalStatus = value;
print(value);
});
},
validator: (thisValue) {
if (thisValue == null) {
return 'Please choose your legal status';
}
return null;
},
),
),
SizedBox(
width: 16.0,
),
Container(
width: 120.0,
child: DropdownButtonFormField<String>(
decoration:
kTextFieldDecoration.copyWith(
hintText: 'Year established',
labelText: 'Year established',
),
value: _yearEstablished,
items: items // a list of numbers that are Strings
.map((label) => DropdownMenuItem(
child:
Text(label.toString()),
value: label,
))
.toList(),
onChanged: (value) {
setState(() {
_yearEstablished = value;
print(value);
});
},
validator: (thisValue) {
if (thisValue == null) {
return 'Please choose your company year of establishment';
}
return null;
},
),
),
],
),
Thanks in advance for your help!
You need to use isExpanded property of DropDownFormField to solve this error.
Row(
children: [
Expanded(
child: DropdownButtonFormField<String>(
isExpanded: true,
decoration:
kTextFieldDecoration.copyWith(
hintText: 'Legal status',
labelText: 'Legal status',
),
value: _legalStatus,
items: [
'Sole proprietorship',
'Partnerships',
'Limited Liability Company (LLC)',
'Corporation',
'Small Business Corporation (S-Corporation)'
]
.map((label) => DropdownMenuItem(
child: Text(
label.toString(),
),
value: label,
))
.toList(),
onChanged: (value) {
setState(() {
_legalStatus = value;
print(value);
});
},
validator: (thisValue) {
if (thisValue == null) {
return 'Please choose your legal status';
}
return null;
},
),
),
SizedBox(
width: 16.0,
),
Container(
width: 120.0,
child: DropdownButtonFormField<String>(
decoration:
kTextFieldDecoration.copyWith(
hintText: 'Year established',
labelText: 'Year established',
),
value: _yearEstablished,
items: items // a list of numbers that are Strings
.map((label) => DropdownMenuItem(
child:
Text(label.toString()),
value: label,
))
.toList(),
onChanged: (value) {
setState(() {
_yearEstablished = value;
print(value);
});
},
validator: (thisValue) {
if (thisValue == null) {
return 'Please choose your company year of establishment';
}
return null;
},
),
),
],
),
You need to use selectedItemBuilder parameter which will control how the selected item will be displayed on the button. Then, TextOverflow.ellipsis will work with you as expected. Here's how to use it:
selectedItemBuilder: (BuildContext context) {
return items.map<Widget>((String item) {
return Text(item, overflow: TextOverflow.ellipsis,);
}).toList();
},
I have a dropdownFormField which takes data from snapshot and working fine.
now the data has grown bigger, as such want to change it to autocompleteFormField.
The code for dropdownFormField I am using is like this:
Container(
height: 50.0,
padding: EdgeInsets.only(
left: 15, right: 15, top: 5),
child: DropdownButtonHideUnderline(
child: ButtonTheme(
child: FutureBuilder(
future: _testkit,
builder: (context,
AsyncSnapshot<TestkitList> snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
return Text('none');
case ConnectionState.waiting:
return Center(
child:
CircularProgressIndicator());
case ConnectionState.active:
return Text('');
case ConnectionState.done:
if (snapshot.hasError) {
return Text(
'error',
// '${snapshot.error}',
style: TextStyle(
color: Colors.red),
);
} else {
return DropdownButtonFormField<
String>(
hint:
Text("Select Testkit Name"),
value: _selectedTestkit,
onChanged: (newValue) async {
_selectedTestkit = newValue;
_selectedTestType =
await getTestType();
setState(() {});
print(
"the below line is printed in dropdownfield");
print(_selectedTestType);
},
validator: (value) => value ==
null
? 'Please select the Testkit'
: null,
items: (snapshot.data.data)
.map((item) =>
DropdownMenuItem<
String>(
child: Text(
item.attributes.name
.length >
30
? item
.attributes
.name
.substring(
0, 30)
: item
.attributes
.name,
),
value: item.id,
))
.toList(),
);
}
}
}),
)),
),
Now plugin example for autocompleteFormField is like below:
SimpleAutocompleteFormField<Person>(
decoration: InputDecoration(labelText: 'Person', border: OutlineInputBorder()),
suggestionsHeight: 80.0,
itemBuilder: (context, person) => Padding(
padding: EdgeInsets.all(8.0),
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Text(person!.name, style: TextStyle(fontWeight: FontWeight.bold)),
Text(person.address)
]),
),
onSearch: (search) async => people
.where((person) =>
person.name.toLowerCase().contains(search.toLowerCase()) ||
person.address.toLowerCase().contains(search.toLowerCase()))
.toList(),
itemFromString: (string) {
final matches = people.where((person) => person.name.toLowerCase() == string.toLowerCase());
return matches.isEmpty ? null : matches.first;
},
onChanged: (value) => setState(() => selectedPerson = value),
onSaved: (value) => setState(() => selectedPerson = value),
validator: (person) => person == null ? 'Invalid person.' : null,
)
somehow I am not able to make it pickup and work as whether I am using classname TestkitList' or snapshot.data.data' replacing the person which is in my case is a future.
You could flutter-typeahead package
https://pub.dev/packages/flutter_typeahead/install
TypeAheadField(
textFieldConfiguration: TextFieldConfiguration(
autofocus: true,
style: DefaultTextStyle.of(context).style.copyWith(
fontStyle: FontStyle.italic
),
decoration: InputDecoration(
border: OutlineInputBorder()
)
),
suggestionsCallback: (pattern) async {
return await BackendService.getSuggestions(pattern);
},
itemBuilder: (context, suggestion) {
return ListTile(
leading: Icon(Icons.shopping_cart),
title: Text(suggestion['name']),
subtitle: Text('\$${suggestion['price']}'),
);
},
onSuggestionSelected: (suggestion) {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => ProductPage(product: suggestion)
));
},
)
I have a DropdownButtonFormField where the last item is a DropdownMenuItem to add a new Object using a Dialog.
Padding(
padding: const EdgeInsets.only(bottom: 15),
child: Observer(
builder: (_){
return DropdownButtonFormField(
value: createdContentStore.subjectTitleSelected,
isDense: true,
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
isDense: true,
border: OutlineInputBorder()
),
onChanged: (value) async {
// print(value);
if(value == 'newSubject'){
Subject newSubject = await showDialog(
context: context,
builder: (_) => CreatedSubjectDialogBox(isNewContent: true,)
);
if(newSubject != null){
createdContentStore.setSubjectTitleSelected(newSubject.title);
createdContentStore.setSubject(newSubject);
} else {
// WHAT CAN I DO HERE TO RESET DROP'S VALUE?
}
} else {
createdContentStore.setSubjectTitleSelected(value);
}
},
iconSize: 30,
hint: Text('Selecione uma matéria'),
items: subjectStore.subjectList.map((subject) => DropdownMenuItem(
value: subject.title,
child: Text(subject.title),
onTap: () {
createdContentStore.setSubject(subject);
},
)).toList()..add(DropdownMenuItem(
value: 'newSubject',
child: Center(
child: Text(
'Nova Matéria'.toUpperCase(),
style: TextStyle(color: redRevise),
),
),
)),
);
},
),
);
When the Dialog is shown the user can create a new Object that will appear in the Dropdown. When the user cancels the Dialog it is showing the last item. The desired behavior is to show the hint instead.
Can someone help me?
Thank you!
All you have to do is remove the value from the drop down,
DropdownButtonFormField(
//** REMOVE THE VALUE **
isDense: true,
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
isDense: true,
border: OutlineInputBorder()
),
onChanged: (value) async {
if(value == 'newSubject'){
Subject newSubject = await showDialog(
context: context,
builder: (_) => CreatedSubjectDialogBox(isNewContent: true,)
);
if(newSubject != null){
createdContentStore.setSubjectTitleSelected(newSubject.title);
createdContentStore.setSubject(newSubject);
} else {
// WHAT CAN I DO HERE TO RESET DROP'S VALUE?
}
} else {
createdContentStore.setSubjectTitleSelected(value);
}
},
iconSize: 30,
hint: Text('Selecione uma matéria'),
items: subjectStore.subjectList.map((subject) => DropdownMenuItem(
value: subject.title,
child: Text(subject.title),
onTap: () {
createdContentStore.setSubject(subject);
},
)).toList()..add(DropdownMenuItem(
value: 'newSubject',
child: Center(
child: Text(
'Nova Matéria'.toUpperCase(),
style: TextStyle(color: redRevise),
),
),
)),
);
},
),
);
I am new to Flutter and I am creating a form with TextFormfield and DropdownButtonFormField. I am trying to display the error message of the DropdownButtonFormField(Site Crop) to below the text box like how the site name field display its error message.
Should I continue using DropdownButtonFormField or is there a better way to do this?
FormSample
code for dropdown
child: DropdownButtonHideUnderline(
child: DropdownButtonFormField(
decoration: InputDecoration(
errorBorder: InputBorder.none,
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
),
hint: Text(
'Choose Country',
style: TextStyle(
fontSize: 16,
color: NewSite.black.withOpacity(0.6),
),
),
validator: (value) => value == null
? 'Please fill in' : null,
value: _selectedLocation,
onChanged: (newValue) {
setState(() {
_selectedLocation = newValue;
});
},
items: _locations.map((location) {
return DropdownMenuItem(
child: new Text(location),
value: location,
);
}).toList(),
icon: Icon(Icons.arrow_drop_down, color: ColorTheme.main,),
style: TextStyle(color: NewSite.black),
isExpanded: true,
elevation: 26,
dropdownColor: NewSite.white,
),
),
Try Form Widget,
Wrap this your filed inside Form,
like this
import 'package:flutter/material.dart';
class DemoDropDownCreate extends StatefulWidget {
#override
_DemoDropDownCreate createState() =>
_DemoDropDownCreate();
}
class _DemoDropDownCreate
extends State<DemoDropDownCreate> {
final _formKey = GlobalKey<FormState>();
bool _autovalidate = false;
String selectedCountry;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Form(
key: _formKey,
autovalidate: _autovalidate,
child:
Column(
children: <Widget>[
DropdownButtonFormField<String>(
value: selectedCountry,
hint: Text(
'Select Country',
),
onChanged: (salutation) =>
setState(() => selectedCountry = salutation),
validator: (value) => value.isEmpty ? 'field required' : null,
items:
['India', 'Japan'].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
FlatButton(
child: Text('PROCEED'),
color: Colors.green,
onPressed: () {
if (_formKey.currentState.validate()) {
//form is valid, proceed further
_formKey.currentState.save();//save once fields are valid, onSaved method invoked for every form fields
print("success");
} else {
setState(() {
_autovalidate = true; //enable realtime validation
});
print("Please select all field");
}
},
)
],
),
),
);
}
}
You can indeed use validators for DropdownButtonFormField
DropdownButtonFormField(
validator: (dynamic value) => value.isEmpty ? "An error happened or please pick something" : null,
decoration: InputDecoration(....
you can change value.isEmpty to any condition you want, same as the "An error happened" message.
How can I validate a checkbox in a Flutter Form? Every other validation works fine, but the checkbox doesn't show an Error.
Here is my code:
FormField(
validator: (value) {
if (value == false) {
return 'Required.';
}
},
builder: (FormFieldState<dynamic> field) {
return CheckboxListTile(
value: checkboxValue,
onChanged: (val) {
if (checkboxValue == false) {
setState(() {
checkboxValue = true;
});
} else if (checkboxValue == true) {
setState(() {
checkboxValue = false;
});
}
},
title: new Text(
'I agree.',
style: TextStyle(fontSize: 14.0),
),
controlAffinity: ListTileControlAffinity.leading,
activeColor: Colors.green,
);
},
),
A cleaner solution to this problem is to make a class that extends FormField<bool>
Here is how I accomplished this:
class CheckboxFormField extends FormField<bool> {
CheckboxFormField(
{Widget title,
FormFieldSetter<bool> onSaved,
FormFieldValidator<bool> validator,
bool initialValue = false,
bool autovalidate = false})
: super(
onSaved: onSaved,
validator: validator,
initialValue: initialValue,
builder: (FormFieldState<bool> state) {
return CheckboxListTile(
dense: state.hasError,
title: title,
value: state.value,
onChanged: state.didChange,
subtitle: state.hasError
? Builder(
builder: (BuildContext context) => Text(
state.errorText,
style: TextStyle(color: Theme.of(context).errorColor),
),
)
: null,
controlAffinity: ListTileControlAffinity.leading,
);
});
}
in case if you want to put your checkbox directly in your Form widget tree you can use solution provided below with FormField widget. Instead of using ListTile I used rows and columns as my form was requiring different layout.
FormField<bool>(
builder: (state) {
return Column(
children: <Widget>[
Row(
children: <Widget>[
Checkbox(
value: checkboxValue,
onChanged: (value) {
setState(() {
//save checkbox value to variable that store terms and notify form that state changed
checkboxValue = value;
state.didChange(value);
});
}),
Text('I accept terms'),
],
),
//display error in matching theme
Text(
state.errorText ?? '',
style: TextStyle(
color: Theme.of(context).errorColor,
),
)
],
);
},
//output from validation will be displayed in state.errorText (above)
validator: (value) {
if (!checkboxValue) {
return 'You need to accept terms';
} else {
return null;
}
},
),
You could try something like this :
CheckboxListTile(
value: checkboxValue,
onChanged: (val) {
setState(() => checkboxValue = val
},
subtitle: !checkboxValue
? Text(
'Required.',
style: TextStyle(color: Colors.red),
)
: null,
title: new Text(
'I agree.',
style: TextStyle(fontSize: 14.0),
),
controlAffinity: ListTileControlAffinity.leading,
activeColor: Colors.green,
);
The above answer is correct, however, if you want to display an error message that is more consistent with the default layout of a TextFormField widget error message, then wrap the Text widget in a Padding widget, and give it the hex colour #e53935.
Note: You may need to adjust the left padding to fit the CheckboxListTile widget is also wrapped in a Padding widget.
Check the code below:
bool _termsChecked = false;
CheckboxListTile(
activeColor: Theme.of(context).accentColor,
title: Text('I agree to'),
value: _termsChecked,
onChanged: (bool value) => setState(() => _termsChecked = value),
subtitle: !_termsChecked
? Padding(
padding: EdgeInsets.fromLTRB(12.0, 0, 0, 0),
child: Text('Required field', style: TextStyle(color: Color(0xFFe53935), fontSize: 12),),)
: null,
),