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),
),
),
)),
);
},
),
);
Related
I am using GetX in my app and I am also a beginner to GetX. I have some code in my controller and my UI listens to that state by wrapping around it with a Obx(() => myWidget). Eventually my UI does not update even when my state changes and I am printing the changes in my console too.
This is my controller
class MyController extends GetxController {
RxList<String> topicsDummyList = <String>[
'Career',
'computer',
'science',
'art',
'creative',
'axim',
].obs;
RxList<String> searchTopicsList = <String>[].obs;
void searchTopicsListHandler(String val) {
if (!val.isBlank!) {
searchTopicsList.value = topicsDummyList
.where(
(String e) => e.toLowerCase().contains(
val.toLowerCase(),
),
)
.toList();
}
}
}
This is my View(UI) too
Obx(() {
return customFilterField(
type: MentorFilterType.TOPIC,
hintText: 'Topic/Mentorship focus',
selectedList: controller.selectedTopicsList,
searchHintText: 'Search topics',
// THIS IS WHERE I AM LISTENING TO THE STATE
dummyList: controller.searchTopicsList.isEmpty
? controller.topicsDummyList
: controller.searchTopicsList,
onEnd: (_) {
controller.searchTopicsList.clear();
});
}),
THIS IS THE customFilterField ITS SELF
Widget customFilterField({
required String hintText,
required List selectedList,
required String searchHintText,
required List dummyList,
required MentorFilterType type,
required Function(dynamic result)? onEnd,
}) {
return Obx(
() => CustomTextFieldWidget(
key: ValueKey(selectedList),
onTap: () {
Utils.customBottomSheet(
onEnd: onEnd,
child: Obx(
() => Column(
children: [
verticalSpaceSmallY,
CustomTextFieldWidget(
onChanged: (val) {
controller.searchTopicsListHandler(
val!,
);
}
hintText: searchHintText,
prefixIcon: SvgPicture.asset(AppImages.searchSvg),
fillColor: Get.theme.scaffoldBackgroundColor,
borderColor: AppColors.tinygrey,
borderRadius: 30,
validator: null,
).paddingSymmetric(
horizontal: 18.w,
),
ListView.builder(
padding: EdgeInsets.only(top: 18.w),
itemCount: dummyList.length,
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
return Obx(
() => CustomListTileWidget(
contentpadding:
EdgeInsets.symmetric(horizontal: 18.w),
onTap: () {
controller.topicsSelectedHandler(
dummyList[index],
);
}
titleWidget: CustomText(
text: dummyList[index],
font: Dimens.fontSize15,
txtAlign: TextAlign.justify,
fntweight: FontWeight.w400,
),
trailing: Container(
height: 15,
width: 15,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: selectedList.contains(dummyList[index])
? null
: Border.all(),
),
child: selectedList.contains(dummyList[index])
? SvgPicture.asset(
AppImages.select,
)
: null,
),
),
);
},
),
verticalSpaceMediumX,
CustomElevatedButton(
onPressed: () {
Get.back();
},
title: 'Continue',
),
],
),
),
);
},
initialValue: selectedList.length == 1
? selectedList.first
: selectedList.length >= 2
? '${selectedList.length} topics selected'
: null,
readOnly: true,
borderRadius: 5,
hintText: hintText,
),
);
}
I am using the CupertinoSearchTextField in my app. It is working fine so far but I am missing one feature: the Cancel-Button.
In native iOS you can set to show the button which looks like this:
Does Flutter provide this functionality? I couldn't find it anywhere.
Clarification:
I don't mean the x/clear-button. I know that is build-in. What I mean is the actual Cancel-button which removes focus from the textField.
use Typeahead package.then in suffixIcon, you can add cancel feature to clear field.
TypeAheadField<String>(
hideOnEmpty: true,
minCharsForSuggestions: 2,
getImmediateSuggestions: true,
textFieldConfiguration: TextFieldConfiguration(
controller: cont_search,
cursorColor: Colors.grey,
textInputAction: TextInputAction.search,
decoration: InputDecoration(
//here the cancel button
suffixIcon: IconButton(
padding: EdgeInsets.fromLTRB(8, 4, 8, 8),
icon: Icon(Icons.clear),
onPressed: (){
cont_search.clear();
},
),
focusColor: Colors.black,
focusedBorder: InputBorder.none,
border: InputBorder.none,
//hintText: 'What are you looking for?',
icon: Icon(Icons.search),
),
onSubmitted: (value){
print("value taken is ${value}");
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => search_page(value)
));
}
),
suggestionsCallback: (String pattern) async {
return matches
.where((item) =>
item.toLowerCase().startsWith(pattern.toLowerCase()))
.toList();
},
itemBuilder: (context, String suggestion) {
return ListTile(
title: Text(suggestion),
);
},
onSuggestionSelected: (String suggestion) {
//push to page
Navigator.of(context).pushReplacement(MaterialPageRoute(
builder: (context) => search_page(suggestion)
));
print("Suggestion selected ${suggestion}");
},
)
If you wanna override x/clear-button's behaviour to unfocus the textfield, use this. Otherwise, you can put search textfield and a clear button in a row and implement button's behaviour like this. Problem solved.
onSuffixTap: (){
FocusScope.of(context).unfocus();
}
I ended up building it myself. I made use of the Focus-Widget and most important the AnimatedPadding. My code looks like this:
Row(
children: [
Flexible(
child: AnimatedPadding(
duration: const Duration(milliseconds: 100),
padding: EdgeInsets.only(right: _isSearching ? 50 : 0),
child: Focus(
onFocusChange: (hasFocus) {
setState(() {
_isSearching = hasFocus;
});
},
child: CupertinoSearchTextField(
placeholder: 'Suche'.tr,
controller: _textEditingController,
focusNode: _focusNode,
),
),
),
),
if (_isSearching)
Tappable(onTap: () {
dismissKeyboard();
}, builder: (context, isTapped) {
return AnimatedText(
text: 'Abbrechen',
isTapped: isTapped,
style: AppTextStyles.avenirNextH4Regular,
color: grey,
);
}),
],
),
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'm working on flutter project .I have a revision form validator that is not working as expected. When I leave the TextFormField empty the validator doesn't show me anything. I want to stay on the revision form until I enter the values.
thanks in advance
my code :
class Revision extends StatefulWidget {
}
class _RevisionState extends State<Revision> with TickerProviderStateMixin {
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
RevisionApi revisionApi = RevisionApi();
TextEditingController _Kilometrage_revisionController =
TextEditingController();
_showAddDialog() async {
await showDialog(
context: context,
builder: (context) => AlertDialog(
backgroundColor: Colors.white,
title: Text("Ajouter un évènement"),
content: StatefulBuilder(builder: (
BuildContext context,
StateSetter setState,
) {
return SingleChildScrollView(
child: Form(
key: _formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(children: [
Expanded(
child: DropdownButtonFormField(
decoration: InputDecoration(
hoverColor: Colors.white,
//contentPadding: EdgeInsets.only(left: 10, right: 15, top: 15),
labelText: 'Type',
alignLabelWithHint: true,
labelStyle: TextStyle(
color: kPrimaryColor,
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
),
),
dropdownColor: Colors.white,
value: status,
items: <DropdownMenuItem>[
DropdownMenuItem(
// value: 'videnge',
value: 0,
child: InkWell(
child: Text('videnge'),
hoverColor: Colors.indigo,
),
),
DropdownMenuItem(
// value: 'visite technique',
value: 1,
child: Text('visite technique'),
),
DropdownMenuItem(
// value: 'assurance véhicule',
value: 2,
child: Text('assurance véhicule'),
),
DropdownMenuItem(
// value: 'autre',
value: 3,
child: Text('autre'),
),
],
onChanged: (value) {
setState(() {
status = value;
});
},
)),
]),
if (status == 1) visiTechniqueDropdown(),
]),
));
}),
actions: <Widget>[
TextButton(
child: Text(
"Enregistrer",
style: TextStyle(
color: Colors.red, fontWeight: FontWeight.bold),
),
onPressed: () {
if (status == null) return;
setState(() {
if (_events[_controller.selectedDay] != null) {
_events[_controller.selectedDay].add(status);
} else {
_events[_controller.selectedDay] = [status];
}
prefs.setString(
"events", json.encode(encodeMap(_events)));
status;
setRevision();
_KilometrageController.clear();
_eventController.clear();
_EmplacementController.clear();
_DateController.clear();
_repeat_revisionController.clear();
_revision_agenceController.clear();
_Kilometrage_revisionController.clear();
Navigator.of(context).pop();
// Navigator.pop(context);
});
},
),
new TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text('Retour'),
),
],
));
}
void setRevision() async {
print("hello");
if (_formKey.currentState.validate()) {
String kilometrage_pour_vidange = _KilometrageController.text;
String revision_type = status.toString();
String revision_title = _eventController.text;
String revision_location = _EmplacementController.text;
String revision_date = _DateController.text;
String repeat_revision = _repeat_revisionController.text;
String revision_agence = _revision_agenceController.text;
String kilometrage_revision = _Kilometrage_revisionController.text;
revisionApi
.setRevision(
revision_type,
revision_title,
revision_date,
revision_location,
kilometrage_pour_vidange,
repeat_revision,
revision_agence,
kilometrage_revision,
)
.then((data) {
if (data != null) {
Navigator.pop(context);
Navigator.of(context).pop();
Navigator.push(
context, MaterialPageRoute(builder: (context) => Revision()));
}
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text(data)));
}).catchError((error) {
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text(error.toString())));
});
setState(() {});
}
}
Widget visiTechniqueDropdown() {
return Column(mainAxisSize: MainAxisSize.min, children: [
Row(
children: [
Flexible(
child: TextFormField(
onFieldSubmitted: (_) => FocusScope.of(context).nextFocus(),
validator: (value) {
if (value.isEmpty) {
return 'Password is required';
}
return null;
},
controller: _DateController,
cursorColor: kPrimaryColor,
decoration: InputDecoration(
labelText: 'Date',
alignLabelWithHint: true,
labelStyle: TextStyle(
color: kPrimaryColor,
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
How i can set the validator correctly ?
This is for you. Thanks and enjoy
// Create a corresponding State class.
// This class holds data related to the form.
class MyFormState extends State<MyForm> {
// Create a global key that uniquely identifies the Form widget
// and allows validation of the form.
//
// Note: This is a GlobalKey<FormState>,
// not a GlobalKey<MyFormState>.
final _formKey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
// Build a Form widget using the _formKey created above.
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextFormField(
// The validator receives the text that the user has entered.
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter some text';
}
return null;
},
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: ElevatedButton(
onPressed: () {
// Validate returns true if the form is valid, or false otherwise.
if (_formKey.currentState!.validate()) {
// If the form is valid, display a snackbar. In the real world,
// you'd often call a server or save the information in a database.
// sendData();
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text('Processing Data')));
}
},
child: Text('Submit'),
),
),
],
),
);
}
}
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)
));
},
)