在Flutter上从TextFormField捕获数据以进行HTTP POST请求 [英] Capture data from TextFormField on flutter for http POST request

问题描述

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

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

我要检索在下面的用户名和密码TextFormField中输入文本

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(

这是我想检索的第一个TextFormField，将其发送到request

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(

这是我要检索发送的第二个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
            ]),
      ),
    );
  }
}

推荐答案

请参阅获取文本字段的值。

1. 在表单中包裹一个 StatefulWidget


2. 添加两个 州中的TextEditingController 字段，每个 TextFormField


3. 将控制器传递到您的表单字段（ controller 构造函数参数）


4. 获取值，例如单击按钮使用 myController.text

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

的侦听器我不确定您是否也询问如何发送HTTP发布请求。

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

这篇关于在Flutter上从TextFormField捕获数据以进行HTTP POST请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！