I am new to Flutter. The thing I want is to keep focus on TextField, but not display keyboard. Is it possible?
To give focus to a text field as soon as it’s visible, use the autofocus property.
content_copy
TextField(
autofocus: true,
);
_dismissKeyboard(BuildContext context) {
FocusScope.of(context).requestFocus(new FocusNode());
}
#override
Widget build(BuildContext context) {
return new GestureDetector(
onTap: () {
this._dismissKeyboard(context);
},
child: new Container(
color: Colors.white,
child: new Column(
children: <Widget>[/*...*/],
),
),
);
}
Both of these components should be used together to implement what you are trying to acheive.
Related
I have a TextField widget inside a Container and want to be able to tap on the TextField without the tap propagating to the parent (the Container). I also want to unfocus the TextField when tapping outside it. To achieve that I have wrapped the Container with an AbsorbPointer widget inside a GestureDetector. The problem is that this makes all taps go to the Container and I lose the ability to interact with the TextField.
How to stop event propagation from the TextField to the Container?
Edit: Futter docs says that TextField widget has a function for tapping outside:
onTapOutside → TapRegionCallback?
Called for each tap that occurs outside of the TextFieldTapRegion group when the text field is focused.
This property does not show among the available properties on the TextField in my app; Flutter 3.3.10 • channel stable
Code looks something like this:
class Filters extends StatelessWidget {
const Filters({super.key});
#override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(horizontal: 12),
child: OutlinedButton.icon(
.
.
onPressed: () => {
showDialog(
context: context,
builder: (_) {
return Dialog(
child: SingleChildScrollView(
child: GestureDetector(
onTap: () => log("parent"),
child: AbsorbPointer(
child: Container(
.
.
child: Column(
children: [
.
.
TextField(
controller: textEditingController,
focusNode: focusNode,
onTap: () {
log("textField..............");
},
.
.
),
],
),
),
),
),
),
);
},
),
},
),
);
}
}
I find myself working with TextFormField hand in hand with DropdownButton. There is a strange process going on inside the view. I put the steps below:
To the TexFormField, I'm assigning an initial value: controller: _nameController..text = datumAdministrative.name.
I enter a new value to the TextFormField.
When the DropdownButton is deployed, the keyboard is closed the whole Widget is redrawn, which causes the TextFormField to recover its initial value and does not keep the new value entered.
Is there any way to avoid, that the TextFormField returns to its initial value when selecting DropdownButton? I would appreciate if you could help me with a post or feedback.
Code Scaffold:
return Scaffold(
resizeToAvoidBottomPadding: false,
resizeToAvoidBottomInset: true,
appBar: AppBar(
backgroundColor: ColorsTheme.primary,
leading: GestureDetector(
onTap: () {
Navigator.pushReplacementNamed(context, 'administrativeListData');
},
child: Container(
padding: EdgeInsets.all(16),
child: FaIcon(FontAwesomeIcons.arrowLeft)),
),
centerTitle: true,
title: Text(datumAdministrative.name +
' ' +
datumAdministrative.lastNameFather),
automaticallyImplyLeading: false),
body: Stack(
children: <Widget>[
ImageBackground(),
_sizeBoxHeight(),
Container(
child: Form(
key: formValidator.formKey,
child: ListView(
children: <Widget>[
_containerImageUser(context, datumAdministrative),
_sizeBoxHeight(),
CustomCardExpansionTile(
title: Constants.administrativeData,
icon: FontAwesomeIcons.addressBook,
widget: Container(
padding: EdgeInsets.all(15),
child: responsiveDataAdministrative(context)),
),
CustomCardExpansionTile(
title: Constants.addressInformationAdministrative,
icon: FontAwesomeIcons.houseUser,
widget: Container(
padding: EdgeInsets.all(15),
child: responsiveAddressInformationAdministrative(
context))),
CustomCardExpansionTile(
title: Constants.userDataSystem,
icon: FontAwesomeIcons.idCard,
widget: Container(
padding: EdgeInsets.all(15),
child: responsiveInformationSystemAdministrative(
context))),
],
),
),
),
],
),
);
Code TextFormField:
TextFormField(
controller: _nameController..text = datumAdministrative.name,
keyboardType: TextInputType.text,
textInputAction: null,
textCapitalization: TextCapitalization.sentences,
onChanged: (value) => formValidator.name = value,
validator: (value) {
if (formValidator.fieldValidText(value)) {
return null;
} else {
return Constants.nameAdministrativeMessage;
}
});
I see that you set the value for the text property of TextEditingController inside the build method. So, it will be invoked whenever the widget rebuilds, causing the value for the field back to the initial one.
The docs actually tells about it:
text property
Setting this will notify all the listeners of this
TextEditingController that they need to update (it calls
notifyListeners). For this reason, this value should only be set
between frames, e.g. in response to user actions, not during the
build, layout, or paint phases.
To fix it, you should remove the cascade notation here:
controller: _nameController..text = datumAdministrative.name,
Do it inside initState() instead:
#override
void initState() {
_nameController.text = datumAdministrative.name;
}
Why my bottomsheet is disappearing upon opening keyboard while clicking textfeild? I tried many solutions but none of them is working properly.
I have nothing much to add just trying to complete the words criteria.
"It looks like your post is mostly code; please add some more details".
Container(
padding: EdgeInsets.symmetric(
horizontal: deviceSize.width * 0.1),
child: InkWell(
onTap: () {
showAddressBottomSheet(context);
},
child: ...// Button style
),
void showAddressBottomSheet(BuildContext _context) {
showModalBottomSheet(
backgroundColor: Colors.transparent,
context: _context,
isScrollControlled: true,
elevation: 20,
builder: (context) {
return AddAddressView(
callback: (val) => setState(() => _addrSelectedTitle = val),
);
},
);
}
Actual Buttom sheet
class AddAddressView extends StatefulWidget {
#override
_AddAddressViewState createState() => _AddAddressViewState();
}
class _AddAddressViewState extends State<AddAddressView> {
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(30),
child: ListView(
shrinkWrap: true,
children: <Widget>[
Text(......),
TextField(
autofocus: true,
style: TextStyle(fontSize:15),
controller: widget.controller,
..........
),
),
),
),
},
}
I have seen this issue before and since you have posted a reproduction of your actual code, I'm assuming this padding value exists somewhere in your widget tree
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom,
),
In older versions of flutter, this padding was required for the bottom sheet to move up when the keyboard is in view. They have however been fixed and you don't need to apply the padding anymore and the framework will handle it. Otherwise there will be twice as much padding as seen in your case.
I need to scroll page when textfield is focused.
So I used scroll_to_index plugin(https://pub.dev/packages/scroll_to_index).
But It operate well only when keyboard is already opened.
If I tap the textfield when keyboard is not opened, it doesn't scroll the page.
I think it is because page is scrolled before the keyboard is opened.
In my opinion, the problem seems to arise because the code works this way.
1.tap a textfield (linked Focusnode has Focus)
2. It try to scroll the page to the target. But because now keyboard is not opened yet, target is already in view. So It looks like nothing happened.
3. Keyboard is opened, and hide the content.
auto_scroll.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:scroll_to_index/scroll_to_index.dart';
class MyCustomScrollView extends StatefulWidget {
#override
_MyCustomScrollViewState createState() => _MyCustomScrollViewState();
}
class _MyCustomScrollViewState extends State<MyCustomScrollView> {
AutoScrollController _autoScrollController = new AutoScrollController();
List<FocusNode> nodes = List<FocusNode>.generate(3, (index) => FocusNode());
Future _scrollToIndex(int index) async {
await _autoScrollController.scrollToIndex(index,
preferPosition: AutoScrollPosition.end);
}
#override
void initState() {
super.initState();
for(var i =0;i<3;i++) {
nodes[i].addListener(() {
if(nodes[i].hasFocus) _scrollToIndex(i);
});
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
body: CustomScrollView(
controller: _autoScrollController,
slivers: [
SliverToBoxAdapter(
child: Container(
child: Column(
children: [
SizedBox(height: 100),
CupertinoTextField(
focusNode: nodes[0],
onEditingComplete: (){
FocusScope.of(context).requestFocus(nodes[1]);
},
),
AutoScrollTag(
key: ValueKey(0),
controller: _autoScrollController,
index: 0,
child: Container(height: 300, color : Colors.green)
),
CupertinoTextField(
focusNode: nodes[1],
onEditingComplete: (){
FocusScope.of(context).requestFocus(nodes[2]);
},
),
AutoScrollTag(
key: ValueKey(1),
controller: _autoScrollController,
index: 1,
child: Container(
height: 300,
color : Colors.green,
child: Center(
child: Text("Here should be visible!!!!"),
),
)
),
CupertinoTextField(
focusNode: nodes[2],
),
AutoScrollTag(
key: ValueKey(2),
controller: _autoScrollController,
index: 2,
child: Container(height: 300, color : Colors.green)
),
],
),
)
)
],
),
);
}
}
This is the code. When I tap on the second textfield, it should scroll to show all the red containers below the second textfield, but it doesn't.
But when the keyboard is up, clicking on the second text field works as desired.
What I expected when I tap 2nd Textfield
What actually happened
I know that just giving focus to textfield is enought to scroll to the textfield. But in my application I have a Positioned bar just above the keyboard, so I have a situation where the Positioned bar covers the text field. This is why I use scroll_to_index.
So what I want to do is wait for the keyboard to come up, and then when the keyboard comes up, run the _scrollToIndex function. How can I wait until keyboard is opened? or there are any good solution for this problem? Thank you for your reading.
You can use flutter_keyboard_visibility. There are 2 ways of implementation: with provider and with listener.
The widgets in my ReorderableListView are essentially TextFields. When long pressing on a widget, after the time when the long press should cause the widget to "hover," instead the TextField receives focus. How can I make the drag & drop effect take precedence over the TextField? I would still like a normal tap to activate the TextField.
The code below demonstrates my issue.
I also tried to use this unofficial flutter_reorderable_list package. (To test this one, replace the Text widget on this line of the example code with a TextField.)
I'm willing to use any ugly hacks to get this working, including modifying the Flutter source code!
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
final children = List<Widget>();
for (var i = 0; i < 5; i++) {
children.add(Container(
color: Colors.pink, // Only the pink area activates drag & drop
key: Key("$i"),
height: 50.0,
child: Container(
color: Colors.grey,
margin: EdgeInsets.only(left: 50),
child: TextField(),
),
));
}
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: ReorderableListView(
children: children,
onReorder: (oldIndex, newIndex) => null,
),
),
),
);
}
}
You need to do multiple things in there to fix this.
First disable the default handler in ReorderableListView by setting buildDefaultDragHandles: false in its properties.
Wrap you child widget inside ReorderableDragStartListener widget like this
ReorderableDragStartListener(
index: i,
child: Container(
color: Colors.grey,
margin: EdgeInsets.only(left: 50),
child: TextFormField(initialValue: "Child $i", ),
),
),
Then inside this ReorderableDragStartListener wrap your child in InkWell and AbsorbPointer. Then use FocusNode to focus inner TextField on single tap.
Like this
InkWell(
onTap: () => _focusNode.requestFocus(),
onLongPress: () {
print("long pressed");
},
child: AbsorbPointer(
child: TextFormField(initialValue: "Child $i", focusNode: _focusNode,),
),
),
You need to create multiple FocusNode for all the items in list. You can do this by using List or by simpling creating a new FocusNode inside the loop.
Complete code example here https://dartpad.dev/?id=e75b493dae1287757c5e1d77a0dc73f1