Im trying to use a dropDownButton instead of a dropDownButtonFormField because i run thru alot of bugs that i see in the dropDownButtonFormField widget. One problem is that in dropDownButtonFormField the clickable area to open the items is only over the hint text and not a cm under it, witch in my case created bad ux. The second problem is that in the dropDownButtonFormField, if an item is a long text and the user presses it when it displays on the main part of the dropdown, the text doesnt create a new line so the user can see the text, the same thing doesnt happen to the dropDownButton widget. Im using dropDownButtonFormField only to use the validator. This is with using DropDownButton Widget.
And this is using the dropDownButtonFormField Widget while having a long text.
Center locationDropDown() {
return Center(
child: Container(
margin: const EdgeInsets.all(10),
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
decoration: BoxDecoration(
color: Colors.grey.shade200,
borderRadius: BorderRadius.circular(12),
),
child: DropdownButtonFormField<String>(
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please select a location';
}
return null;
},
decoration: const InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
),
),
value: chooseLocation,
hint: const Text('Select a location'),
isExpanded: true,
items: workingData!.map((some) {
return DropdownMenuItem(
child: Text(
some.name + ' (${some.location})',
),
value: some.id,
);
}).toList(),
onChanged: (String? displayedValue) {
setState(
() {
chooseLocation = displayedValue!;
},
);
},
),
),
);
}
isDense: false,
Add isDense value false in DropdownButtonFormField.
Related
So I have this function to show a reusable dialog that have a list of widget. The main problem lies in the dropdown and the text field. to begin with my dropdown value is A and I wanted the text field to only show when the dropdown value is B.
I tried some code already but when I choose the value B the text field won't show up, then if I close the dialog and try to open it again next time, that will show the text field that I want, but the value in the drop down is A not value B.
How can I achieve something like what I wanted ?
Here's my code :
List<String> itemList = ["notMyExpertise", "Alasan lainnya"];
String selectedReason = '';
void rejectDialog(
{required dynamic ticketData,
required String ticketId,
required VoidCallback onDeclineConfirmed}) {
showDialog(
context: context,
builder: (context) {
return ReusableConfirmationDialog(
titleText: 'hello'.tr(),
contentText: 'hello bro let me try to help you first before '.tr(),
confirmButtonText: 'sure'.tr(),
declineButtonText: 'cancel'.tr(),
onDecline: () {
Navigator.pop(context);
},
onConfirm: onDeclineConfirmed,
additionalWidget: Column(
children: [
ReusableDropdownButton(
itemList: itemList,
width: 197,
height: 26,
onChanged: (newValue) {
setState(() {
selectedReason = newValue;
});
},
),
const SizedBox(height: 10),
if (selectedReason == 'Alasan lainnya')
Container(
constraints: const BoxConstraints(minHeight: 78),
width: 230,
decoration: BoxDecoration(
color: othersChatColor,
borderRadius: BorderRadius.circular(15),
),
padding:
const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
child: TextFormField(
controller: ticketTextController,
maxLength: 100,
inputFormatters: [
LengthLimitingTextInputFormatter(1000),
],
style: primaryColor400Style.copyWith(
fontSize: fontSize11,
),
maxLines: null,
keyboardType: TextInputType.multiline,
decoration: InputDecoration(
contentPadding: EdgeInsets.zero,
border: InputBorder.none,
hintText: 'reasonHint'.tr(),
hintStyle: weight400Style.copyWith(
color: hintColor, fontSize: fontSize11),
counterText: '',
),
),
),
const SizedBox(height: 5),
],
),
);
});
}
Because the dialog and bottom sheets don't have states so you must create a different stateful widget for the widget you want to show in the dialog or sheet and then return it from the dialog or bottom sheet. that's how it will work as a stateful widget and will update as you want.
void rejectDialog(
{required dynamic ticketData,
required String ticketId,
required VoidCallback onDeclineConfirmed}) {
showDialog(
context: context,
builder: (context) {
return StateFulWidgetYouCreate();
});
}
I m new to flutter, need help to set the value of the DropdownButton programmatically.
The value is from textfield. Once i click it, it will set the value at the dropdownbutton automatically.
Widget _districtListContainer() {
return Container(
width: 360.0,
child: new InputDecorator(
decoration: InputDecoration(
suffixIcon: new Icon(
Icons.search,
color: Colors.blue[700],
),
labelText: 'Select District',
labelStyle: TextStyle(fontSize: 12.0)),
isEmpty: _selectedDistrict == null,
child: new DropdownButtonHideUnderline(
child: new DropdownButton<District>(
value: _selectedDistrict,
isDense: true,
isExpanded: false,
onChanged: (District newValue) {
setState(() {
_selectedDistrict = newValue;
});
},
items: _listDistrict?.map((District value) {
return new DropdownMenuItem<District>(
value: value,
child: new Text(
value.district != null ? value.district : '',
style: new TextStyle(fontSize: 11.0),
),
);
})?.toList() ??
[],
),
),
),
margin: EdgeInsets.only(bottom: 10.0));
}
thanks
First Of All, Add the data into the list[] From the TextFormfield then retrieve the list into DropDownButton item.
Also, Make Sure, DropDown Button List Display Textformfield data insert activity could not be able to update simultaneously.
this is my code
Padding(
padding: EdgeInsets.symmetric(vertical: 10.h),
child: DropdownButtonFormField(
decoration: InputDecoration(
labelText: "countries",
labelStyle: TextStyle(fontSize: 16.sp),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10))),
items: const [
DropdownMenuItem(child: Text("USA"), value: "USA"),
DropdownMenuItem(
child: Text("Canada"), value: "Canada"),
DropdownMenuItem(
child: Text("Brazil"), value: "Brazil"),
DropdownMenuItem(
child: Text("England"), value: "England"),
],
),
),
when i click on DropDownButtonFormField the items does not appear .
A common mistake when it is not updating is to use DropdownButtonFormField in a StatelessWidget rather than a StatefulWidget. but hard to say as you did not share that part of the code
Seems you are also missing other code in your DropdownButtonFormField
DropdownButtonFormField(
value: myVariable,
onChanged: (value) {
setState(() {
myVariable= value;
});
},
Let me know if this does not help.
Anything with an interaction with user must be inside StatefulWidget.
There is another ways like changenotifier using notifyListeners() inside void function.
https://medium.com/#aruny3/how-to-use-changenotifier-in-flutter-440371617b8c
Hi i'm trying to change the background color of my TextField Widget in flutter when the user focus on it. But it kinda seems there is no way to do it. If anybody has any idea please let me know ^^.
Here's the Widget itself:
TextField(
controller: emailController,
style: TextStyle(
color: Colors.white, fontSize: 18, height: 0.8),
textAlign: TextAlign.center,
decoration: InputDecoration(
focusColor: AppColors.inputBackgroundDarkFocus,
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: Color(color)),
),
filled: true,
fillColor: Color(0xff25282C),
hintText: 'Email',
hintStyle:
TextStyle(fontSize: 18, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
),
Thks <3
Hover & focus are two different things, so this might not answer your question, but the below can change field color "on focus" (the cursor is in the field).
If you're implementing purely for Flutter web and you want to handle "hover" you could do the below with a MouseRegion wrapper instead of Focus. Info on MouseRegion.
By wrapping a form field in a Focus widget, you can listen/capture focus changes on that field using the onFocusChange constructor argument (of Focus).
It takes a Function(bool).
Here's an example of an onFocusChange handler function:
onFocusChange: (hasFocus) {
if (hasFocus) {
print('Name GAINED focus');
setState(() {
bgColor = Colors.purple.withOpacity(.2);
});
}
else {
print('Name LOST focus');
setState(() {
bgColor = Colors.white;
});
}
},
If you wrap your field in a Container, you can give the Container a color and change that color using a Focus widget described above.
Here's a full page example (stolen from another answer of mine on a similar topic):
import 'package:flutter/material.dart';
class TextFieldFocusPage extends StatefulWidget {
#override
_TextFieldFocusPageState createState() => _TextFieldFocusPageState();
}
class _TextFieldFocusPageState extends State<TextFieldFocusPage> {
Color bgColor = Colors.white;
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
// ↓ Add this wrapper
Focus(
child: Container(
color: bgColor,
child: TextField(
autofocus: true,
decoration: InputDecoration(
labelText: 'Name'
),
textInputAction: TextInputAction.next,
// ↓ Handle focus change via Software keyboard "next" button
onEditingComplete: () {
print('Name editing complete');
FocusScope.of(context).nextFocus();
},
),
),
canRequestFocus: false,
// ↓ Focus widget handler, change color here
onFocusChange: (hasFocus) {
if (hasFocus) {
print('Name GAINED focus');
setState(() {
bgColor = Colors.purple.withOpacity(.2);
});
}
else {
print('Name LOST focus');
setState(() {
bgColor = Colors.white;
});
}
},
),
TextField(
decoration: InputDecoration(
labelText: 'Password'
),
),
],
),
),
),
);
}
}
I think you can repeat this for each field you need colored.
Hovering can be managed using the hoverColor property of InputDecoration:
Full source code:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Hover TextField Demo',
home: HomePage(),
),
);
}
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: EdgeInsets.all(16.0),
alignment: Alignment.center,
child: TextField(
decoration: InputDecoration(
filled: true,
hoverColor: Colors.indigo.shade200,
hintText: 'Email',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
),
),
);
}
}
Almost every style property can be changed by decoration property, which requires an InputDecoration object.
To handle the hover style, this object provides only the hoverColor property, which overwrite the filledColor when the mouse is hovering the widget. The filled property needs to be true for this to work.
InputDecoration(
filled: true,
hoverColor: Colors.red,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
The problem is when you want to change others style properties like the border for example.
In that case you need to make your widget Statefull and add a state boolean like isHover.
Then you could wrap your widget inside MouseRegion and handle the hovering like in this example:
return MouseRegion(
onEnter: (_)=>setState(()=>isHover = true),
onExit: (_)=>setState(()=>isHover = false),
child: YourWidget(),
);
Once isHover is available you can use wherever you want to change the UI according to the hover state.
Example with border:
TextField(
decoration: InputDecoration(
filled: true,
hoverColor: Colors.red,
border: isHover? OutlineInputBorder(
borderSide: BorderSide(
color: Colors.green,
width: 1.5,
),
borderRadius: BorderRadius.circular(8.0),
) : null,
//By leaving null, the component will use the default value
),
),
I think the limitation is due to the fact that the hover behaviour is more web/desktop related. I hope flutter is going to implement better properties to handle this inside InputDecoration.
I am working on an Array of Textformfields. The Array can be more than 50. I want to submit array of values to the server. The issue is when I execute validator it will be validating the first 8 in the array after that no error message. That too disappears when scrolling. I posted my code below:
void validateAndSave() {
final form = _formKey.currentState;
if (form.validate()) {
_formKey.currentState.save();
print('Form is valid');
}
else {
// _formKey.currentState.
print('form is invalid');
}
}
Widget singleItemList(int index) {
Item item = itemList[index];
return Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
),
child:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child:Padding(
padding: const EdgeInsets.fromLTRB(20, 10, 10, 20),
child: new TextFormField(
controller: _controller[index],
keyboardType: TextInputType.number,
//onSubmitted: (text) {
// takeNumber(text, item.id);
//},
validator: (value) {
if (value.isEmpty) return 'value is required';
},
decoration: new InputDecoration(
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.indigo)),
labelText: itemList[index].id,
suffixStyle: const TextStyle(color: Colors.red)
),
),
),
),
],
),
);
}
Please help me. Thanks in advance.
Regards,
Sathish
Have you considered replacing ListView.builder with Column?
Like this:
child: SingleChildScrollView(
child: Column(
children: List.generate(itemList.length, (index) {
if (itemList.isEmpty) {
return CircularProgressIndicator();
} else {
return singleItemList(index);
}
})
)
)
From ListView documentation:
Destruction
When a child is scrolled out of view, the associated element subtree, states and render objects are destroyed. A new child at the same position in the list will be lazily recreated along with new elements, states and render objects when it is scrolled back.