Capture data from TextFormField on flutter for http POST request - dart

Question

i am trying to make a login with flutter.
I am consulting a web service.
I want to send in the body of the Post request the username and the password from different TextFormField. how can i do that?
Here is the code i've been working on.
import 'package:flutter/material.dart';
import 'package:device_id/device_id.dart';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:convert';
class SignIn extends StatefulWidget {
#override
_SignInState createState() => _SignInState();
}
class _SignInState extends State<SignIn> {
Future<String> getData() async {
final response = await http.post(
Uri.encodeFull("The route i'm consulting),
body: {
"username": user,
"password": password
},
I want to retrieve the input texts from username and password TextFormField below in here
headers: {
"Accept": "application/json",
});
print(response.statusCode);
print(response.body);
}
String _deviceid = 'Unknown';
String user = '';
String password = '';
TextEditingController controller = new TextEditingController();
TextEditingController controller2 = new TextEditingController();
#override
void dispose() {
controller.dispose();
controller2.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
username = TextFormField(
This is the first TextFormField i want to retrieve to send it in the body of the request
controller: controller,
keyboardType: TextInputType.text,
autofocus: false,
decoration: InputDecoration(
hintText: "Username",
hintStyle: TextStyle(fontSize: 16.0),
contentPadding: EdgeInsets.fromLTRB(20.0, 0.0, 20.0, 10.0),
border:
UnderlineInputBorder(borderRadius: BorderRadius.circular(32.0))),
);
final password = TextFormField(
This is the second TextFormField i want to retrieve to send it in the body of the request
controller: controller2,
autofocus: false,
obscureText: true,
decoration: InputDecoration(
hintText: "Password",
hintStyle: TextStyle(fontSize: 16.0),
contentPadding: EdgeInsets.fromLTRB(20.0, 25.0, 20.0, 10.0),
border:
UnderlineInputBorder(borderRadius: BorderRadius.circular(32.0))),
);
final loginButton = Padding(
padding: EdgeInsets.symmetric(vertical: 25.0),
child: Material(
borderRadius: BorderRadius.circular(30.0),
shadowColor: Colors.blueAccent.shade100,
elevation: 10.0,
child: MaterialButton(
minWidth: 200.0,
height: 42.0,
color: Colors.blueAccent,
onPressed: (){
},
child: Text(
"Login",
style: TextStyle(color: Colors.white),
),
),
),
);
return Form(
child: new Center(
child: ListView(
padding: EdgeInsets.only(left: 24.0, right: 24.0, top: 10.0),
children: <Widget>[
username,
SizedBox(height: 8.0),
password,
SizedBox(height: 24.0),
loginButton
]),
),
);
}
}

Answer 1

See Retrieve the value of a text field.
Wrap a StatefulWidget around your form
Add two TextEditingController fields in your State, one for each TextFormField
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');
}
}

Answer 2

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: 'ali#gmail.co', 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