Text in the TextField disappears when keyboard is removed - flutter

Text entered in my TextField widget disappears when I remove the keyboard from the view.
There are two TextField's, title and description. The above problem only occurs for the title but not with the description.
Here's the relevant excerpt from the build method:
#override
Widget build(BuildContext context) {
_note = widget._note; // This is coming from StatefulWidget Class above
TextStyle textStyle = Theme.of(context).textTheme.title;
_titleController.text = _note.title;
_descriptionController.text = _note.description;
return Scaffold(
body: ListView(
children: <Widget>[
Padding(
padding: EdgeInsets.all(15.0),
child: TextField(
style: textStyle,
controller: _titleController,
decoration: InputDecoration(
labelText: "Title",
labelStyle: textStyle,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0))),
),
),
Padding(
padding: EdgeInsets.all(15.0),
child: TextField(
style: textStyle,
controller: _descriptionController,
decoration: InputDecoration(
labelText: "Description",
labelStyle: textStyle,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0))),
),
),
...
}
}
Screenshots of Keyboard shown & removed.

This occurs because you are setting the text in your build method. This build method can get invoked at any time, e.g. when the keyboard is contracted because the UI needs to react to that.
This means that you should move this code to initState:
#override
void initState() {
_note = widget._note;
_titleController.text = _note.title;
_descriptionController.text = _note.description;
super.initState();
}
initState is only called once when the your widget is inserted into the build tree.
I am not sure why this only happens with one of the TextFields's. I assume that you are using the TextController's somewhere else to set the Note's content, which could cause this behavior.
Furthermore, you should probably avoid using a leading underscore _ for _note in your StatefulWidget (widget._note) as you access it from your State.

Related

How can I generate a new TextEditingController every time when I add a new TextBlock

So, am having this page, where I can add multiple TextFormFiled that represent a text block. The thing is, it's generated dynamic so you never know how many Text Editing controllers you need.
void addTextBlock() {
state.blocks.add(
TextBlock(hint: 'Description', controler: state.descriptionController));
}
Here is the code that trigger when tapping Add Text Block, and as you can see it uses the same controller.
The TextBlock wiget :
class TextBlock extends Block {
TextBlock({required this.controler, required this.hint})
: super(BlockType.TextBlock);
final String hint;
final TextEditingController controler;
#override
Widget toWidget() {
return TextFormField(
controller: controler,
decoration: InputDecoration(
filled: true,
fillColor: AppColors.textFieldBackground,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: BorderSide(color: AppColors.textFieldHintColor),
),
contentPadding:
const EdgeInsets.symmetric(vertical: 22.0, horizontal: 24.0),
hintText: hint,
hintStyle:
AppTextStyles.normalRoboto(color: AppColors.textFieldHintColor),
),
maxLines: null,
keyboardType: TextInputType.multiline,
style: AppTextStyles.normalRoboto(color: AppColors.textFieldHintColor),
);
}
}
Try out below code:
List<TextEditingController> textEditingControllers = [];
void addTextBlock() {
TextEditingController textEditingController = TextEditingController();
textEditingControllers.add(textEditingController)
state.blocks.add(
TextBlock(hint: 'Description', controler: textEditingControllers[textEditingControllers.length-1]));
}

Exiting Focus from Multiline - Flutter

I am currently trying to make a page that take notes on my app so I am using the multiline keyboard type to keep track of the text. However, I am having difficulties escaping the focus of the text. Return brings a new line (which I want it to do) but I am unsure as to when I have onSubmit or onEditingComplete because I never actually submit anything using multiline. In addition, tapping outside of the textfield does not exit the focus of the field. Here is the code that I wrote please let me know if you have any recommendations!
import 'package:flutter/material.dart';
class NoteDetail extends StatefulWidget {
#override
_NoteDetailState createState() => _NoteDetailState();
}
class _NoteDetailState extends State<NoteDetail> {
#override
Widget build(BuildContext context) {
final dimensions = MediaQuery.of(context).size;
return LimitedBox(
maxHeight: dimensions.height - 100,
maxWidth: dimensions.width - 100,
child: Column(
children: <Widget>[
SizedBox(
height: dimensions.height * 0.10,
),
TextField(
keyboardType: TextInputType.multiline,
//this allows the text to work with multiple lines
maxLines: null,
//no max lines making it scroll forever
decoration: InputDecoration(
hintText: 'Start taking some notes',
//shows text before the user starts to text
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
//this removes the border all together
contentPadding:
EdgeInsets.symmetric(horizontal: dimensions.width * 0.1),
//giving the content some padding on the side
),
),
],
),
);
}
}

Change default TextFormField's icon color from grey to anything but show primary color on selection

I want to change default colour of icon of TextFormField, which will also get changes on selection. There are few way to change colour but non of them works for me.
1. Set icon color
When changing icon colour directly as below the icon colour will not change when selected, below is the code of the same and screenshot which shows red colour when field is selected or not selected.
TextFormField(
maxLength: 15,
decoration: InputDecoration(
labelText: "USER NAME",
prefixIcon: IconTheme(data: IconThemeData(
color: Colors.redAccent
), child: Icon(Icons.email,))
),
onSaved: (username) => _username = username,
),
2. Leave it default
This will show grey colour when field is not selected and primary colour when field is selected. Below is the screenshot of the same. Here i want to change the colour of icon from grey to red and want to show primary colour on selection.
NOTE:- It will be good if we can do this using theme
The code below will generate the FocusNodes you need to manage the focus of your TextFormFields and do a setState when the focus changes from one field to another. We are just creating a list of focus nodes, listening to changes on each of them and assigning them to a field:
List<FocusNode> _focusNodes = [
FocusNode(),
FocusNode(),
FocusNode(),
FocusNode(),
];
#override
void initState() {
_focusNodes.forEach((node){
node.addListener(() {
setState(() {});
});
});
super.initState();
}
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
TextFormField(
focusNode: _focusNodes[0],
decoration: InputDecoration(
prefixIcon: Icon(Icons.email,
color: _focusNodes[0].hasFocus ? Theme.of(context).accentColor : Colors.grey,
),
),
),
TextFormField(
focusNode: _focusNodes[1],
decoration: InputDecoration(
prefixIcon: Icon(Icons.email,
color: _focusNodes[1].hasFocus ? Theme.of(context).accentColor : Colors.grey,
),
),
),
TextFormField(
focusNode: _focusNodes[2],
decoration: InputDecoration(
prefixIcon: Icon(Icons.email,
color: _focusNodes[2].hasFocus ? Theme.of(context).accentColor : Colors.grey,
),
),
),
],
);
}
If you want to change icon color at the time textFormField is selected,
change it according to below.
...
Theme(
child: Column(
children: <Widget>[
TextFormField(
maxLength: 15,
decoration: InputDecoration(
labelText: "USER NAME",
prefixIcon: Icon(Icons.email,)
),
onSaved: (username) => _username = username,
),
TextFormField(
maxLength: 15,
decoration: InputDecoration(
labelText: "EMAIL",
prefixIcon: Icon(Icons.email,)
),
onSaved: (usermail) => _useremail = usermail,
),
],
),
data: Theme.of(context)
.copyWith(primaryColor: Colors.redAccent,),
),
...
Conclusion:
Wrap all the textFormFields widgets with Theme widget and set data field as the color you want as a highlighter.
As you can see in the picture below, You can't change the default color of Icons in Textfields. The only solution for it is to create PR on flutter and change this method. 😄

Flutter enabled and focus textformfield

I create a profile page and i have 4 textformfield. I want to on tap icon activate textformfield and focus at the same time. Now I need tap twice on icon and first activated field, secondly focused.
How to solve it?
My code:
class UserProfile extends StatefulWidget {
#override
_UserProfileState createState() => _UserProfileState();
}
class _UserProfileState extends State<UserProfile> {
FocusNode myFocusNode;
bool isEnable = false;
#override
void initState() {
super.initState();
myFocusNode = FocusNode();
}
#override
void dispose() {
myFocusNode.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: EdgeInsets.fromLTRB(40.0, 50.0, 20.0, 0.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Flexible(
child: TextFormField(
enabled: isEnable,
focusNode: myFocusNode,
),
),
IconButton(
icon: Icon(Icons.edit),
onPressed: () {
setState(() {
isEnable = true;
FocusScope.of(context).requestFocus(myFocusNode);
});
})
],
),
You should use autofocus: isEnable instead.
just do like below in your ontap
setState(() {
if(isEnable)
Future.delayed(const Duration(milliseconds: 10), ()
{FocusScope.of(context).requestFocus(myFocusNode);
});
isEnable = true;
});
in first time isEnable is false so focusing not call and just enabling work and in other times get focus too.
you can't focus widget until disabled and when you enabling widget. when you do focusing and enabling at same time in ui tread it's try focusing before enabling because of their rendering time.if you post some delay to focusing the problem get solving.
Try using readOnly instead of enabled in TextFormField
I faced similar issue when I had multiple TextFields to enable kinda PIN input. And some of that had to be dynamically enabled and disabled plus prevent users from entering value in the next field while they haven't finished the previous one. I've tried a lot of approaches and focusing field after some delay was not a way to go because I wanted the keyboard to always be available while entering. So I've took a crazy path and solved this next way:
onTap: () => _focusNodes[_currentLetterIndex].requestFocus()
where _focusNodes are for each letter and _currentLetterIndex is calculated programmatically during input (when finished letter 0 -> current becomes 1 and so on). As the result when user tried to tap on next field - it was automatically refocused to the current one which behaves like the next field is disabled.
An example of the full text field looks like this (don't pay attention to decorations etc.)
TextField(
key: ValueKey(index),
controller: _editingControllers[index],
onTap: () => _focusNodes[_currentLetterIndex].requestFocus(),
focusNode: _focusNodes[index],
textAlign: TextAlign.center,
showCursor: false,
maxLength: 2,
enableInteractiveSelection: false,
autocorrect: false,
enableSuggestions: false,
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
height: 1.2,
decoration: TextDecoration.none),
decoration: InputDecoration(
fillColor: !_wordCompleted &&
!correct &&
_editingControllers[index].text.isNotEmpty
? const Color(0xFFFFEEF0)
: Colors.white,
filled: !correct,
counterText: "",
border: defaultInputBorder,
focusedBorder: !correct &&
!_wordCompleted &&
_editingControllers[index].text.isNotEmpty
? incorrectInputBorder
: focusedInputBorder,
enabledBorder: _wordCompleted
? focusedInputBorder
: correct
? correctInputBorder
: defaultInputBorder,
errorBorder: defaultInputBorder,
disabledBorder: _wordCompleted
? focusedInputBorder
: correct
? correctInputBorder
: defaultInputBorder,
contentPadding: const EdgeInsets.only(left: 2)),
),

Flutter Why my textfield lose the value when I dont focus on it?

I made a class and it has a controller and a widget that includes a padding within a textfield.
Now when I change the focus from the textfield to something else it lose the value.
this is my code.
`
class RxInput {
final String hindText;
final bool obscureText;
Widget widget;
final TextEditingController controller = new TextEditingController ();
String get value => controller.text;
RxInput (this.hindText,context,{this.obscureText = false}) {
widget = Padding (
padding: const EdgeInsets.all(20.0),
child: Material(
borderRadius: BorderRadius.circular(20.0),
shadowColor: Colors.blue.shade200,
elevation: 5.0,
child:TextField(
controller: controller,
decoration: InputDecoration(
hintText: hindText,
border: InputBorder.none,
alignLabelWithHint: true,
),
obscureText: obscureText,
)
),
);
}
}
`
I solved this question. You should initialize your variable in the initState instead of build.