在flutter上从TextFormField捕获数据以获取http POST请求

Question

我正试着用颤振登录。我正在咨询网络服务。我想在Post请求的主体中发送来自不同TextFormField的用户名和密码。我怎样才能做到这一点？这是我一直在努力的代码。

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
        },

我想在这里从用户名和密码TextFormField中检索输入文本

        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(

这是我想要检索的第一个TextFormField，以便在请求正文中发送它

      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(

这是我要检索的第二个TextFormField，以便在请求正文中发送它

      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

见Retrieve the value of a text field。

1. 在你的表格周围包裹一个StatefulWidget
2. 在TextEditingController中添加两个State字段，每个TextFormField一个
3. 将控制器传递给表单域（controller构造函数参数）
4. 检索值，例如使用myController.text在按钮单击侦听器中

我不确定你是否也在询问如何发送HTTP帖子请求。

这是一个非常小的例子：

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

以下是登录屏幕的完整示例...您可以在验证输入并通过验证后提交数据。

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);
  }
}

您可以回到完整示例。 https://github.com/barakat-turki/flutter_login_screen