dart - 为 http POST 请求从 TextFormField 中捕获数据

Question

我正在尝试使用 flutter 进行登录。我正在咨询网络服务。我想在 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. 在您的 State 中添加两个 TextEditingController 字段，每个 TextFormField
3. 将 Controller 传递给您的表单字段(controller 构造函数参数)
4. 检索值，例如在按钮点击监听器中使用 myController.text

我不确定您是否也在询问如何发送 HTTP post 请求。

这是一个非常简单的例子:

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