Capture data from TextFormField on flutter for http POST request

See Retrieve the value of a text field.

  1. Wrap a StatefulWidget around your form
  2. Add two TextEditingController fields in your State, one for each TextFormField
  3. Pass the controllers to your form fields (controller constructor parameter)
  4. Retrieve the values, for example in a button click listener using myController.text

I'm not sure if you are also asking how to send a HTTP post request.

Here is a very minimal example:

class LoginScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {

  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        TextFormField(controller: _usernameController,),
        TextFormField(controller: _passwordController, obscureText: true,),
        RaisedButton(
          onPressed: _performLogin,
          child: Text('Login'),
        )
      ],
    );
  }

  void _performLogin() {
    String username = _usernameController.text;
    String password = _passwordController.text;

    print('login attempt: $username with $password');
  }
}

Here is a full example of a login Screen ... where you can validate inputs and submit the data after passing the validation.

import 'package:flutter/material.dart';
import '../mixins/validate_mixin.dart';

class LoginScreen extends StatefulWidget{
  final GlobalKey<ScaffoldState> scaffoldKey;
  LoginScreen(this.scaffoldKey);
  @override
  State<StatefulWidget> createState() {
    return LoginScreenState(scaffoldKey);
  }
}

class LoginScreenState extends State<LoginScreen>  with ValidateMixin{
  final formKey = GlobalKey<FormState>();
  final GlobalKey<ScaffoldState> scaffoldKey;

  LoginScreenState(this.scaffoldKey);

  String _email;
  String _password;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(40.0),
      child: Form(
        key: formKey,
        child: Column(
          children: <Widget>[
            emailField(),
            passwordField(),
            Container(margin: EdgeInsets.only(bottom: 25.0),),
            submitButton(),
          ],
        ),
      ),
    );
  }

  Widget emailField() {
    return TextFormField(
      decoration: InputDecoration(hintText: '[email protected]', labelText: 'Email'),
      keyboardType: TextInputType.emailAddress,
      validator: validateEmail,
      onSaved: (String value) {
        _email = value;
      },
    );
  }

  Widget passwordField() {
    return TextFormField(
      obscureText: true,
      decoration: InputDecoration(hintText: '*****', labelText: 'Password'),
      onSaved: (String value) {
        _password = value;
      },
    );
  }

  Widget submitButton() {
    return RaisedButton.icon(
      color: Colors.cyan[900],
      textColor: Colors.white,
      label: Text('Submit'),
      icon: Icon(Icons.save), 
      onPressed: () {
        final bool v = formKey.currentState.validate();
        if (v) {
          formKey.currentState.save();
          _performLogin();
          print('object');
        }
    },);
  }

  void _performLogin () {
    var snackbar = new SnackBar(
      content: Text('Email: $_email and Password $_password'),
    );
    scaffoldKey.currentState.showSnackBar(snackbar);
  }
}

You can back to the full example. https://github.com/anbturki/flutter_login_screen

Tags:

Dart

Flutter