my problem:
The suggestionbox doesn't hide, except i choose one suggestion. hideSuggestionsOnKeyboardHide changes absolutely nothing...
I saw that others solved this problem with another package named keyboardvisibility.
But for me this is not a solution, beause i don't want the suggestionbox to disappear as soon as the keyboard disappears, I want the suggestionbox to disappear as soon as I tap somewhere outside the suggestionbox. Hope someone can help.
Here my code if it helps:
TypeAheadField(
hideOnEmpty: true,
hideOnError: true,
suggestionsBoxController: _suggestionsBoxController,
textFieldConfiguration: TextFieldConfiguration(
controller: typeAheadControllerA,
decoration: const InputDecoration(
hintText: 'Artikelnummer',
icon: const Icon(
Icons.business_center,
color: Colors.grey,
))),
suggestionsCallback: (pattern) {
return autoA
.where((autoA) =>
autoA.toLowerCase().contains(pattern.toLowerCase()))
.toList();
},
itemBuilder: (context, suggestion) {
return ListTile(
title: Text(suggestion),
);
},
transitionBuilder: (context, suggestionsBox, controller) {
return suggestionsBox;
},
onSuggestionSelected: (suggestion) {
typeAheadControllerA.text = suggestion;
},
)
Another minor problem/question:
How can i change the width of the suggestionbox / adapt to the width of the input field?
When I set the icon, logically the width of the input field decreased but the width of the suggestion box did not adapt to the width of the input field. I tried with suggestionsBoxDecoration offsetX. With offsetX I can move the box to the right, but the box keeps its width and therefore goes too far to the right but then i tried with wrapping the typeaheadfield in a padding widget or sizedbox but nothing works. If nobody knows how to solve this, I will probably remove the icons...
Thanks for help :)
You just use the keyboard "done" on iOS physical devices (I haven't tested it on Android yet - assuming there is something similar?), or click another field if there is one. The iOS simulator just doesn't bring up the keyboard when typing so it annoyingly seems like it can't be hidden without selecting a suggestion.
Tapping outside the field but not on another field doesn't unfocus normal TextFields either.
Use this metod: hideSuggestionsOnKeyboardHide: true,
You should wrap your scaffold with GestureDetector and with the property onTap() you call _suggestionBoxController.close();. Another thing if it does not work for you maybe you have a lot of code that is executed in one single file a simple refactoring can be your solution and set hideSuggestionsOnKeyboardHide : true (it was my case). For the width of the box suggestionBoxController.resize()
Related
I want to disable a button untill all the required fields are filled. I found similar questions here but all answers are based on making the onPressed property to null. But it does not disable the tap effect.
I want something like this. On disabled mode, clicking on the button won't even cause a Tap effect. Can someone help with a solution?
For a limited number of widgets, you can wrap them in a widget IgnorePointer: when its ignoring property is set to true, the sub-widget (actually, the entire subtree) is not clickable.
IgnorePointer(
ignoring: true, // or false
child: CustomButton(
onPressed: _login,
child: Text("Login"),
),
)
checkout this widget.set absorb to true when the required field is empty or is not validated.
https://api.flutter.dev/flutter/widgets/AbsorbPointer-class.html
In the textField add
onChanged : (val){ setastate((){});}
You mustbe already having a TextEditingController for the textfield. For example i shall name it phoneTextController.
Now in the button check the condition
phoneTextController.text.length > 10
For example
Inkwell(
onTap:(){
if(phoneTextController.text.length > 10){
SendOtp()
}
}
child: Container(
color: phoneTextController.text.length > 10 ? Colors.blue : Color.blue.withOpacity(0.5),
)
)
If you're using one of Flutter's built-in button Widgets, setting the onTap to null should automatically disable the button and its effect. Now all that remains is to conditionally do this during your build. Say, like the other answer, your TextEditingController is named phoneTextController:
ElevatedButton(
child: Text('Next'),
onTap: phoneTextController.text.length > 10 ? () => goToNextPage() : null,
),
Which will automatically enable the button and add the callback as soon as the condition is met (in this example, the input length is >10.
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 trying to implement list of multiple pincode suggestions in a similar fashion as the filter options shown in above image(Relevance, Open now, Top-rated, Visited, ...).
Now here 7 options are provided in google maps which are fixed but I'll only be able to set pincode suggestions based on users current location & number of suggestion will vary, so a way to dynamically add these items is required.
Here In the Image we can select any number of suggestions & I also want the same for my implementation. Similarly this should be horizontally scrollable single strip.
I am not aware of the technical term for these but I've seen it in many popular apps. Still, I have not been able to find anything similar in android documentation, material UI and stackoverflow. So if it's something popular or standard then please point me into right direction.
What I've tried: Radio Groups/Buttons, Customizable Checkbox, Horizontal Scroll without scroll bar & similar other stuff but no luck.
Thanks a lot in advance for the help!!!
Those are called Chip in Flutter.
Here's how you can achieve a horizontal scrolling strip with check/uncheck behavior (in a StatefulWidget's State class) :
Map<String, bool> filters = {
"Relevance": true,
"Open now": false,
"Top": false,
"Something": true,
"Another thing": false,
"Many filters": false,
};
// In build()
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: filters.entries.length,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () => setState(() => filters[filters.keys.elementAt(index)] = !filters.values.elementAt(index)),
child: Chip(
backgroundColor: filters.values.elementAt(index) ? Colors.white : Colors.grey,
label: Text(filters.keys.elementAt(index))),
);
})
You could also extract the filters map in a separate "business logic" class with a state management solution.
I want to move the box that is full of red background over there to the position of the empty box.
In other words, I want to insert a container right next to the point where TextFormField ends.
Is this something that can be implemented in Flutter? Or is there no way?
-- UPDATE
I actually want to add a "send" Icon to the end of the text. All the examples I looked up were always going to the end of the Containers due to Rows, as shown in the photos I posted. Since the position of the send icon will always change, depending on the length of the text, in real time, this problem feels very difficult to me. and also for your information, this is not Text, but TextField or TextFormField widget.
Unfortunately, there is no way of doing this since TextFormField accepts string only and not a widget. Also, according to material guidelines, any such widget should be at the end of the text field as a suffix such as:
TextField(
controller: _controller,
decoration: InputDecoration(
hintText: "Enter a message",
suffixIcon: IconButton(
onPressed: () => _controller.clear(),
icon: Icon(Icons.clear),
),
),
)
May I ask what is the purpose?! maybe we can help find better solution then?
but if we have to then I can think of 2 ways.
1- Include the box as a Text - For example ▀ (Alt + 223)
var box = ▀
Text("efwewewefwewefe$box"),
2- Option 2: Wrap in a Stack widget
Stack(
children: [
Text("efwewewefwewefe"),
Container(height:5, width:5, color: Colors.red]),
I have a periodic function which appends text to a TextField.
For this purpose I set a TextEditingController and invoke: controller.text += someText.
However, when the TextField is scrolled and text is added, the TextField automatically scrolls back to the top and the just appended text gets out of view.
Is there any way to change the scroll behavior?
Set the selection using the TextEditingController.
This will prevent the TextField from rebuilding every time and/or moving the cursor to the start of the TextField.
TextField(
controller: textEditController,
onChanged: (content) {
textEditController..text = someText
..selection = TextSelection.collapsed(offset: textEditController.text.length);
},
)
I don't know if this can serve you already today but in case someone else sees the publication I hope that helps, I'll say that I do this with a SingleChildScrollView() and I set the reverse property to true. I have to say that I don't use a TexField(), you use a Text(), but it behaves well and every time the text increases a line automatically the reverse property of the SingleChildScrollView() causes it to scroll down and always see the last thing that is being written.
This is a small example of how I do it in my code:
Container(
alignment: Alignment.bottomRight,
height: size.height*0.044,
child: SingleChildScrollView(reverse: true,child: Text(valorOperacion1, style: GoogleFonts.exo(color: tema.hintColor, fontSize: 18.0.sp, fontWeight: FontWeight.w600,),))
),