I have simple TextField inside a row with a Text and a TextField but it gives issue mentioned below if textAlign:TextAlign.end is used in TextField/TextFormField. Though textAlign:TextAlign.start and textAlign:TextAlign.center works fine.
When user types some thing for example "Hello World" and brings the cursor to the middle for example letter "o" of word "Hello" manually by tapping and presses the backspace key of android keyboard, the "Hello" word gets deleted but now cursor moves to end of the word i.e. at letter "d" of "World" but now if user press backspace it won't get deleted. Seems like the caret moves outside the input box.
Link to full code and a video
Widget build(BuildContext context) {
return MaterialApp(
home:Scaffold(
appBar: AppBar(title: Text("Demo")),
body: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Text("data"),
flex: 2,
),
Expanded(
flex: 2,
child: TextField(
decoration: InputDecoration(
hintText: "Enter Text Here",
border: InputBorder.none
),
textAlign: TextAlign.end,
controller: TextEditingController(text: "Text"),
)
)
]
),
]
),
)
);
}
My specific issue is resolved by Flutter, as of now only on DEV channel and is being tracked by issue.
Related
I am trying to modify a TextField inside an ExpansionTile title and when I modify the text I want to update data in my database firestore, this part works fine. The problem is when I write something in my TextField I can only write one letter and then I have to select the TextField again.Initial text field value
Second text field value
In the second picture after writing the number 2 in test the 'blue mark' exits the TextField and if I want to write in the TextField again I have to select the text field again.
This is the TextField code inside the expansion tile, all this code is inside a stream where each list tile is an entry from the database:
return SizedBox(
width: double.infinity,
child: SingleChildScrollView(
child: Column(
children: [
Column(
children: [
ListView.builder(
physics: const ClampingScrollPhysics(),
shrinkWrap: true,
itemCount: widget.shoppingListsCart.length,
itemBuilder: (BuildContext context, int index) {
String shoppingCartListName =
widget.shoppingListsCart.elementAt(index).name;
final shoppingListId =
widget.shoppingListsCart.elementAt(index).shoppingListId;
TextEditingController _textEditingControllerShoppingListName = TextEditingController();
_textEditingControllerShoppingListName.text = shoppingCartListName;
_textEditingControllerShoppingListName.addListener(() {
widget.firebaseCloudStorage.updateShoppingListName(
widget.shoppingCartListId, shoppingListId, _textEditingControllerShoppingListName.text);
});
return Column(
children: [
ExpansionTile(
backgroundColor: Colors.indigo,
title: SizedBox(
child: Row(
children: [
SizedBox(
width: 220,
child: TextField(
decoration: const InputDecoration(
border: InputBorder.none,
counterText: '',
),
controller: _textEditingControllerShoppingListName,
maxLength: 35,),
), ),
Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
IconButton(onPressed: (){
}, icon:Icon(Icons.edit,)),
IconButton(onPressed: () {}, icon: Icon(Icons.delete)),
],
),
]),
),
children: [
ProductsInShoppingListView(
shoppingListName: shoppingCartListName,
shoppingCartId: widget.shoppingCartListId,
shoppingListId: shoppingListId,
firebaseCloudStorage: widget.firebaseCloudStorage,
),
]),
],
);
},
),
Column(
children: [
ProductsInCartView(
shoppingCartId: state.shoppingCartId),
],
),
],
),],
),
),
);
I tried using a Future in the text field and changing from a stateless widget to a stateful widget, the error is something like this TextField accepts only one letter and loses focus after each letter but since I am using flutter that solution didn't work for me. I don't know what is the error because the console doesn't say anything. Please help, thank you.
did you try it? It's TextFormField. Here I fixed the value 1, we can make it a dynamic value. But I hope this will be helpful to think about next.
TextFormField(
onChanged: (value) {
if (value.length == 1) {
FocusScope.of(context).nextFocus(); //whatever you want to do
}
},
inputFormatters: [
LengthLimitingTextInputFormatter(1)
],
),
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;
}
Trying to create a post screen, where the user can select an image and post a text.
The main problem that I have is that I need to add a Cirlce avatar for the user on the left side of the textField and a hint "Insert your text here"
this is what I achieved so far:
class CityRecommendations extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: const Size.fromHeight(100),
child: DropdownAppBar(),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
TextField(
decoration: InputDecoration(
hintText: "Insert your message",
),
scrollPadding: EdgeInsets.all(20.0),
autofocus: true,
),
MessageBox(),
],
),
);
}
}
How to add a circleAvatar for the user?
I do not sure this is you wanted
Row(
children: <Widget>[
CircleAvatar(child: Icon(Icons.person)),
Expanded(
child: Padding(
padding: EdgeInsets.all(8),
child: TextField(
decoration: InputDecoration(
hintText: "Insert your message",
),
scrollPadding: EdgeInsets.all(20.0),
autofocus: true,
),
))
],
),
You can use CircleAvatar widget for that.
A circle that represents a user.
Typically used with a user's profile image, or, in the absence of such an image, the user's initials. A given user's initials should always be paired with the same background color, for consistency.
If foregroundImage fails then backgroundImage is used. If backgroundImage fails too, backgroundColor is used.
The onBackgroundImageError parameter must be null if the backgroundImage is null. The onForegroundImageError parameter must be null if the foregroundImage is null.
You can wrap your TextField with CircleAvater
I've got a Column indide a Scaffold, and one of the Column's children is a TextField. I'd like the Textfield to expand and take all the available space, but if there is not enough space (basically when the keyboard shows up), I want the Textfield to be 3 lines height min and the Column to be scrollable so the focus on the Textfield works as intended.
I've tried a lot of different widgets, like Expand, IntrinsicHeight, LayoutBuilder, ConstrainedBox, SingleChildScrollView...
But none of the tested combination did work as expected...
The SingleChildScrollView page did help me a lot but none of the example match my situation :
https://docs.flutter.io/flutter/widgets/SingleChildScrollView-class.html
Scaffold(
body: Column(
children: <Widget>[
Text("Some\nvery\nvery\nvery\nvery\nvery\nvery\nvery\nvery\nvery\nvery\nvery\nlong\ntext"),
RaisedButton(child: Text("Some button")),
Text("Second line"),
Expanded(
child: Padding(
//Use the expand parameter instead of padding + maxLines, once released : https://github.com/flutter/flutter/pull/27205
padding: const EdgeInsets.only(top: 10, bottom: 30),
child: TextField(
decoration: InputDecoration(
hintText: "Message...",
),
maxLength: 500,
maxLengthEnforced: true,
maxLines: 50,
),
),
),
Center(
child: RaisedButton(
child: Text('OK'),
onPressed: _send,
),
)
],
),
)
With that code the first part works fine : when not keyboard is shown, the Textfield is expanded as expected.
But when the keyboard shows up, the layout overflow (because there is no SingleChildScrollView).
EDIT : the new TextField.extends property helped a bit but didn't solved my issue...
For some reason after updating flutter, one of the sections of my app has been broken. I have a list of text form widgets set in a SingleChildScrollView. Whenever I press one of the text forms, the keyboard appears and an empty white box pushes itself up into the field of view, obscuring the text entry boxes.
After having some trouble with text entry in a list view before I followed the advice of this link: https://www.didierboelens.com/2018/04/hint-4-ensure-a-textfield-or-textformfield-is-visible-in-the-viewport-when-has-the-focus/
It effectively solved the problems I had beforehand where the text entry boxes were not remaining visible when the keyboard appears. But now the while box is appearing and obscuring the view. I also made sure to use:
resizeToAvoidBottomPadding: false
as is regularly advised.
Here is the code in question with one of the text field widget's code too:
#override
Widget build(BuildContext context) {
return new Scaffold(
body: new SafeArea(
child: new Form(
key: _formKey,
child: new SingleChildScrollView(
padding: const EdgeInsets.all(16.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
circumstances(),
divider(),
description(),
divider(),
externalHappenings(),
divider(),
internalHappenings(),
divider(),
reflectionsAndCorrections(),
divider(),
abatement(),
divider(),
footerButtons()
],
),
)
)
),
resizeToAvoidBottomPadding: false,
);
}
Widget circumstances() {
return new EnsureVisibleWhenFocused(
focusNode: _focusNodeCircumstances,
child: new TextFormField(
controller: _circumstancesController,
maxLines: maxLines,
decoration: const InputDecoration(
border: const OutlineInputBorder(
borderRadius: const BorderRadius.all(const Radius.circular(0.0)),
borderSide: const BorderSide(color: Colors.black, width: 1.0)
),
filled: true,
labelText: "Circumstances",
hintText: "Who was there? Where were you?",
),
autofocus: true,
validator: (value) {
_activeJournalEntry.setCircumstances(value);
if(value == null || value.isEmpty) {
return "Please enter some circumstances.";
}
},
focusNode: _focusNodeCircumstances,
),
);
}
The replies to this thread pointed me in the right direction to solve the issue.
I had three deep nested scaffolds where the innermost two had this set:
resizeToAvoidBottomPadding: false
However, my outermost Scaffold did not, causing this issue. So it turns out that it is fine to have nested Scaffolds but you must ensure that each of them have that property set to avoid this issue.
See also,
https://github.com/flutter/flutter/issues/7036
As jared-nelsen stated, one of your Scaffold does not have the property specified. Note that this can also be caused by an external library, in my case it was the DevicePreview library.