Flutter - TextField loses value on focus out

flutter textfield remove focus
flutter textfield focus event
flutter onfieldsubmitted
flutter textfield set value
flutter textfield onsubmitted
flutter unfocus textfield
scroll to the focused item input when the keyboard is up flutter
flutter show keyboard programmatically

I have two TextField within a container. The first is defined as TextInputType.text and the second is TextInputType.number. Whenever I change focus (First<>Second or Second<>First), the TextField that loses focus also loses its value.

Strangely, both textFields works if I define both of them as TextInputType.text, if I set one of them as anything but TextInputType.text, both loses the typed value on focus out.

Very annoying. I have no idea why this happens.

It is a Flutter bug or am I doing something wrong?

This is the widget code:

class LoginInput extends StatelessWidget {
  final String hintText;
  final IconData icon;
  final String iconTag;
  final TextEditingController controller;
  final TextInputType inputType;
  final bool obscureText;

  LoginInput(this.hintText, this.icon, this.iconTag, this.controller,
      this.inputType, this.obscureText);

  @override
  Widget build(BuildContext context) {
    return new Column(children: <Widget>[
      new Container(
          height: 56.0,
          child: new Material(
              borderRadius: BorderRadius.all(Radius.circular(5.0)),
              elevation: 0.0,
              color: Colors.white,
              child: new Container(
                  child: new ListTile(
                leading: new Hero(
                    tag: iconTag, child: new Icon(icon, color: Colors.black)),
                title: new TextField(

                  keyboardType: inputType,
                  obscureText: obscureText,
                  textInputAction: TextInputAction.send,
                  controller: controller,
                  decoration: new InputDecoration(
                    border: InputBorder.none,
                    hintText: hintText,
                  ),
                  style: new TextStyle(
                      color: Colors.black,
                      fontSize: 18.0,
                      fontFamily: 'Caecilia',
                      fontWeight: FontWeight.w500),
                ),
              )))),
      new Divider(height: 0.0, color: Theme.of(context).dividerColor),
    ]);
  }
}

This is how is called:

  final LoginInput nameField = new LoginInput("Full name", Icons.face, "leading_icon_name", new TextEditingController(), TextInputType.text,false);

  final LoginInput birthField = new LoginInput("Birth date", Icons.date_range, "leading_icon_birth", new TextEditingController(), TextInputType.number, false);

If you move your

final TextEditingController controller;

out of the class, the content of the TextField will not be reset each time the TextField lose its focus.

Aplying this to your code:

final TextEditingController controller;

class LoginInput extends StatelessWidget {
  final String hintText;
  final IconData icon;
  final String iconTag;
  final TextInputType inputType;
  final bool obscureText;

  LoginInput(this.hintText, this.icon, this.iconTag, this.inputType, this.obscureText);

  @override
  Widget build(BuildContext context) {
    return new Column(children: <Widget>[
      new Container(
          height: 56.0,
          child: new Material(
              borderRadius: BorderRadius.all(Radius.circular(5.0)),
              elevation: 0.0,
              color: Colors.white,
              child: new Container(
                  child: new ListTile(
                leading: new Hero(
                    tag: iconTag, child: new Icon(icon, color: Colors.black)),
                title: new TextField(

                  keyboardType: inputType,
                  obscureText: obscureText,
                  textInputAction: TextInputAction.send,
                  controller: controller,
                  decoration: new InputDecoration(
                    border: InputBorder.none,
                    hintText: hintText,
                  ),
                  style: new TextStyle(
                      color: Colors.black,
                      fontSize: 18.0,
                      fontFamily: 'Caecilia',
                      fontWeight: FontWeight.w500),
                ),
              )))),
      new Divider(height: 0.0, color: Theme.of(context).dividerColor),
    ]);
  }
}

TextFormField losing value when changing focus. � Issue #16391 , Flutter Doctor. [✓] Flutter (Channel beta, v0.2.8, on Linux, locale en_US.UTF-8) • Flutter version 0.2. Flutter TextField Loses Focus with setState. Ask Question Asked 1 year, 4 months ago. Active 4 months ago. Flutter - TextField loses value on focus out. 1.

I just faced the same issue and the solution was to transform my Widget from a Stateless to a Stateful one.

The last comment in this thread might help with your issue.

TextField announces value changes after it loses focus � Issue , TextField announces value changes after it loses focus #23180 value changes are being announced even after the text field has lost Ensure text fields are only live regions when they have input focus flutter/engine#6649. Give focus to the TextField when a button is tapped. 1. Create a FocusNode. First, create a FocusNode. Use the FocusNode to identify a specific TextField in Flutter’s “focus tree.” This allows you to give focus to the TextField in the next steps. Since focus nodes are long-lived objects, manage the lifecycle using a State object.

If you are now running with a statefulWidget and something can re-render your view such as: PageView or your logic. You should use TextEditingController

Remember to dispose it.

Inside your statefulWidget

class _MainViewState extends State<_MainView> {

PageController _pageController;
TextEditingController _textController;

  @override
  void initState() {
    _pageController = PageController(keepPage: true, initialPage: 2);
    _textController = TextEditingController();
    super.initState();
  }

  @override
  void dispose() {
    _pageController.dispose();
    _textController.dispose();
    super.dispose();
  }

  ...

  TextField( 
     controller: _textController, //Add controller to your TextField
     onChanged: (v) {
        //do something
     },
     ...
  ),

}

From now, you can trigger value of TextField from _textController.text or onChanged function depends on your need.

Focus and text fields, So i would like to check only if the text field lost focus !! TextField. Here is the original code from Flutter with modification for your API check -. 3. Display the current value of the text field. After supplying the TextEditingController to the text field, begin reading values. Use the text() method provided by the TextEditingController to retrieve the String that the user has entered into the text field.

Validate a text form field only when lost focus. instead of at every , Every time I click to TextFromField, the focus is lost and keyboard hide. 'Title'), onChanged: (String value) { _title = value; }, ), new TextField( decoration: new� In this Google flutter code example we are going to learn how to shift focus to next text field input in flutter. The code is based on flutter version 1.0.0 Main.dart (App entry point)

TextFormField is losing focus - flutter, The first thing we need to do is detect when a user has tapped outside of the currently focused text field. This is trivial thanks to the GestureDetector widget,� This sample shows how to get a value from a TextField via the onSubmitted callback. To create a local project with this code sample, run: flutter create --sample=material.TextField.2 mysample This sample shows how to get a value from a TextField via the onSubmitted callback.

How to Dismiss the Keyboard in Flutter the Right Way, (onBlur) the focus At Powermatic Tools we value your opinion. The following The focusout event is sent to an element when it, or any element inside of it, loses focus. Can some Flutter provides two text fields: TextField and TextFormField. The render onchange fires when the focus is lost and the content has changed. It's definitely a large issue of flutter not having a functionality to solve such a basic problem out of the box. I think flutter's textfield must be able to lose focus by itself if a tap occured somewhere else. Couldn't agree more. If you find a better solution, please do share!

Comments
  • can you show your code?
  • Yes, I put it below the question
  • I put both nameField and birthField inside one column. On focus out, both are working fine (values are retained). textInputAction field is not available for me and it is not there in docs.flutter.io/flutter/material/TextField-class.html
  • Thanks! I will try this later.