I am using drop down search to fetch and display the list of items from firebase but I am getting a form field box by default with this widget. I wan't to remove this as it is not matching with my UI can anyone help me in this.
Widget I used is https://pub.dev/packages/dropdown_search
I am talking about the box that appears in this.
If you suggest me to use another widget then please also tell how to enable search oprtion in the same
If you want to remove border around dropdown element, set dropdownSearchDecoration to InputDecoration(border: InputBorder.none):
DropdownSearch<String>(
dropdownSearchDecoration: InputDecoration(border: InputBorder.none),
// ...
)
The DropdownSearch widget border have its default input border style. To remove, we need to overwrite it with our own inputBorder by setting the border to InputBorder.none.
Code
DropdownSearch<String>(
enabled: true,
items: yourList,
dropdownDecoratorProps: const DropDownDecoratorProps(
dropdownSearchDecoration: InputDecoration(border:InputBorder.none),
),
onChanged: (myVal) {},
selectedItem: yourOwnSetValue
)
dropdownDecoratorProps: DropDownDecoratorProps(
dropdownSearchDecoration: InputDecoration(border: InputBorder.none),
),
Related
I'm trying to implement the new Material 3 DropdownMenu in my application to replace the old DropdownButton, but I can't seem to find where to add the error and helper texts.
Back in the DropdownButtonFormField, they would go inside the decoration parameter. Example:
decoration: InputDecoration(
labelText: 'labelText',
errorText: 'errorMessage',
helperText: 'helperText',
),
I could find the style parameters for both helper and error texts in the DropdownMenu, but not the parameter for the text itself.
Am I missing something or this widget does not support those parameters?
This was my DropdownButton before:
DropdownButtonFormField<MyItem>(
value: _selectedItem,
decoration: const InputDecoration(
labelText: 'Salutation',
errorText: 'errorMessage',
helperText: 'helperText',
border: OutlineInputBorder(),
),
onChanged: _onChanged,
items: items.map((MyItem item) {
return DropdownMenuItem<MyItem>(
value: item,
child: Text(item.title),
);
}).toList(),
);
The expected result with the DropdownMenu is a similar, but with the lowered position of the items menu and the integrated search feature it has. Those were the main reasons for the change.
For anyone needing this in the future, I opened an issue in the Flutter repository and they replied that the parameters are missing and will potentially be added.
Here is the link for the issue.
I am facing an ui issue with TextFormField error border in focused state.
When I tapped inside TextFormField, width is getting double on focus as below screen shot
Could you please guide me what am i doing wrong here.
You are not doing anything wrong, this is a material design behavior, if you want to disable it , try this:
TextField(
decoration: InputDecoration(
label: Text('label'),
floatingLabelBehavior: FloatingLabelBehavior.never,// <--- add this
),
),
I implemented a page in my Flutter application that has a text input field and 2 time pickers that are activated by pressing the button to make them appear. The issue is that if I have a new value in the TextInputField and use one of the time pickers, after I'm done what I have typed in the input field will just reset.
Code snippet from the input field:
SizedBox(
width: 350,
child: TextField(
controller: titleController,
decoration: const InputDecoration(
border: OutlineInputBorder(),
hintText: 'Title',
),
onChanged: (value) {
title = value;
},
),
),
I've tried keeping the value of what is being typed in through a titleController and I have also attempted using the onChanged() method and a separate variable to keep the value in there. These solutions both didn't work for me, however. Is there any other solution to this issue?
If your TextField inside a stateless widget it will keep clearing the value of the controller everytime something pop on the screen, so try to put your TextField inside a stateful widget
So I have this Container with a specific decoration border, and as a child I have the TextFormField with another styled border using the parameter enabledBorder.
My problem is: I have to make a double click to show the cursor and be able to write on my textformfield, because the focus only gets the container decoration and do not gets the focus from the inside of my TextFormField.
Here is my code:
onFocusChange: (focus) {
print(focus);
},
child: Focus(
child: Container(
decoration: _focusNode.hasFocus && widget.errorText == null
? BambamShadows.dropShadowSelected()
: null,
child: TextFormField(
cursorColor: BambamColors.brandBlack,
focusNode: _focusNode,
inputFormatters: widget.inputFormatters,
enabled: widget.enabled,
onChanged: widget.onChanged,
How can I get both Focus inside Container and TextFormField?
Check out this package # https://pub.dev/packages/indexed it'll grant you the same equivalent property that Z-index has in CSS which will allow you to position elements in a stack based on the index; so based on your question if your txtformField has a higher index it wouldn't be "below" the container (if that makes sense);
Also you can always consider modifying your UI to focus on using Stack (very good documentation about it here: https://medium.flutterdevs.com/stack-and-positioned-widget-in-flutter-3d1a7b30b09a)
I'd try indexed, else I'd clone your current java to implement a stack UI structure and test different variants till you nail it;
Try this autofocus: true, autofocus is a property in TextFormField class
I am using TextField in Flutter. While I am using helperText field to show some information, the text is being clipped with 3 dots at the end. Here is my code:
TextField(
decoration: InputDecoration(
helperText: 'veryyyyyy longggg text!'
),
);
Here is how it is happening:
Luckily, I already found solution and just wanted to share with you!
TextField(
decoration: InputDecoration(
helperText: 'veryyy long text',
helperMaxLines: 3, // give as many lines as you want not to overflow
errorText: 'there may also be long error text',
errorMaxLines: 3, // Solution is very similar
)
);