Estoy intentando crear una página de inicio de sesión en Flutter ...

Así que agregué 2 campos de entrada de texto para el nombre de usuario y uno para la contraseña

Pero cuando trato de pasar del nombre de usuario a la contraseña o de la contraseña al nombre de usuario, el texto que ingresé antes desaparece

Esta es mi pantalla de inicio de sesión: importar 'paquete: 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,
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Y este es el widget de entrada de contraseña que agregué al código:

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',
        ),
      ),
    );
  }
}
0
Yusof Antar 5 mar. 2021 a las 19:45

1 respuesta

La mejor respuesta

¡Hy Yusof Antar!

¡La solución es muy sencilla!

La variable TextEditingController debe estar fuera del método de compilación del widget.

Simplemente mueva ambas variables del controlador fuera del método de construcción del widget.

1
Ahsan Zulfiqar 5 mar. 2021 a las 17:58