Flutter inpute text field lose text when losing focus

Question

I am trying to make a loging page in flutter...

so i added 2 textInput Field for username and one for password

but when i try to go from username to password or from password to username the text that i inputed before disappear

this is my login screen: import 'package:flutter/material.dart';

import '../widgets/password_input.dart';

class LoginScreen extends StatelessWidget {
  static const routeName = '/login';

  Widget build(BuildContext context) {
    final deviceSize = MediaQuery.of(context).size;

    final _username = TextEditingController();
    final _password = TextEditingController();

    _clearValues() {
      _username.clear();
      _password.clear();
    }

    return Scaffold(
      appBar: AppBar(
        title: Text('Duckanji'),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Container(
          child: Column(
            children: [
              Container(
                margin: EdgeInsets.symmetric(vertical: 30),
                child: Image.asset(
                  'assets/img/auth_logo.png',
                  width: deviceSize.width * 0.5,
                ),
              ),
              SizedBox(
                height: 10,
              ),
              Container(
                height: 100,
                margin: EdgeInsets.symmetric(horizontal: 20),
                child: TextField(
                  textInputAction: TextInputAction.next,
                  controller: _username,
                  maxLength: 35,
                  decoration: InputDecoration(
                    prefixIcon: Icon(Icons.account_box_rounded),
                    border: OutlineInputBorder(),
                    labelText: 'Username',
                  ),
                ),
              ),
              PasswordInput(_password),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  FlatButton(
                    padding: EdgeInsets.symmetric(
                      vertical: 10,
                      horizontal: 15,
                    ),
                    color: Theme.of(context).primaryColor,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(5),
                    ),
                    onPressed: () {
                      print(_username.text);
                      print(_password.text);
                      _clearValues();
                    },
                    child: Text(
                      'Login',
                      style: TextStyle(
                        fontSize: 20,
                        color: Colors.white,
                      ),
                    ),
                  ),
                  FlatButton(
                    padding: EdgeInsets.symmetric(
                      vertical: 10,
                      horizontal: 15,
                    ),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(5),
                      side: BorderSide(
                        color: Theme.of(context).primaryColor,
                      ),
                    ),
                    onPressed: () {},
                    child: Text(
                      'Register',
                      style: TextStyle(
                        fontSize: 20,
                        color: Theme.of(context).primaryColor,
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

and this is the passwordinput widget tht i added to the code:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class PasswordInput extends StatefulWidget {
  TextEditingController password;

  PasswordInput(this.password);

  @override
  _PasswordInputState createState() => _PasswordInputState();
}

class _PasswordInputState extends State<PasswordInput> {
  var hiddenContent = true;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      margin: EdgeInsets.symmetric(horizontal: 20),
      child: TextField(
        onChanged: (value) {
          print(value);
          widget.password.text = value;
        },
        textInputAction: TextInputAction.done,
        obscureText: hiddenContent,
        autocorrect: false,
        controller: widget.password,
        keyboardType: TextInputType.text,
        maxLength: 35,
        decoration: InputDecoration(
          prefixIcon: Icon(Icons.lock),
          suffixIcon: IconButton(
            icon: hiddenContent
                ? Icon(Icons.visibility)
                : Icon(Icons.visibility_off),
            onPressed: (hiddenContent
                ? () {
                    setState(() {
                      hiddenContent = false;
                    });
                  }
                : () {
                    setState(() {
                      hiddenContent = true;
                    });
                  }),
          ),
          border: OutlineInputBorder(),
          labelText: 'Password',
        ),
      ),
    );
  }
}

Answer 1

Hy Yusof Antar!

Solution is very simple!

TextEditingController variable must be outside of Widget build method.

just move both controller variables outside from Widget build method.