Flutter handle input text field from other widget

Question

I'm using the Flutter login home animation from GeekyAnts. You can find it on: https://github.com/GeekyAnts/flutter-login-home-animation

I can't get to handle username and password values entered in the fields as these fields are being called from the login page through a Widget called FormContainer which contains two other Widgets called InputFieldArea. When using onChanged in the TextFormField, I don't know how to make these values reach the parent LoginPage class.

Could you help me understand how changes in fields in the Login page should be handled in order to make the login work?

Thanks!

Answer 1

Use a TextEditingController, as described in Retrieve the value of a text field.

TextFormField takes the controller as a constructor argument, you can pass it down to your InputFieldArea through a similar constructor:

class InputFieldArea extends StatelessWidget {
  final TextEditingController controller;
  final bool obscureText;
  // ...

  const InputFieldArea({Key key, this.controller, this.obscureText}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.orange,
      // ...
      child: TextFormField(
        controller: controller,
        obscureText: obscureText,
        // ...
      ),
    );
  }
}

It's important that the controllers are stored in a State, so that if the widgets are rebuilt for some reason, the controllers are not recreated:

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: <Widget>[
          InputFieldArea(
            controller: _usernameController,
            obscureText: false,
          ),
          InputFieldArea(
            controller: _passwordController,
            obscureText: true,
          ),
          RaisedButton(
            onPressed: () {
              // example how to read the current text field values
              print('username: ${_usernameController.text}, password: ${_passwordController.text}');
            },
          )
        ],
      )
    );
  }
}

Also check out the shrine login demo.