Capture data from TextFormField on flutter for http POST request
See Retrieve the value of a text field.
- Wrap a
StatefulWidget
around your form - Add two
TextEditingController
fields in yourState
, one for eachTextFormField
- Pass the controllers to your form fields (
controller
constructor parameter) - 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