Flutter post HTTP 请求

Question

我正在尝试发送 post 请求然后得到一些响应。这是站点：www.reqres.in and the user data https://reqres.in/api/users.

当我按下按钮时，我没有看到任何文本。将姓名和工作发布到 API 并接收姓名、ID、日期时间和工作。如果我不使用 Widget _showData 并在下面的文本字段中显示文本，那么我会看到数据，但会出现 lateInitialization 错误，但我想使用 Widget _showData 来显示它。

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:http_req_advanced/usermodel.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'HTTP Request 2',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var users;
  Future<UserModel> createUser(String name, String job) async {
    final apiUrl = "https://reqres.in/api/users";
    final response =
        await http.post(Uri.parse(apiUrl), body: {"name": name, "job": job});

    if (response.statusCode == 201) {
      users = userModelFromJson(response.body);
    } else
      throw Exception('Failed to load');
    return users;
  }

  late UserModel user;

  final nameController = TextEditingController();
  final jobController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('HTTP Request'),
        ),
        body: Container(
          padding: EdgeInsets.all(16),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextField(
                controller: nameController,
              ),
              TextField(
                controller: jobController,
              ),
              //Text(
                 // "The user ${user.name} ${user.id} is created at ${user.createdAt} with job${user.job}"),
              ElevatedButton(
                onPressed: () async {
                  final String name = nameController.text;
                  final String job = jobController.text;

                  final UserModel userr = await createUser(name, job);

                  setState(() {
                    user = userr;
                     _showData(user.name, user.job, user.id, user.createdAt);
                  });
                },
                child: Text('Make a Request'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _showData(String name, String job, String id, DateTime createdat) {
    return Container(
      alignment: Alignment.bottomCenter,
      child: SizedBox(
        height: 32,
        child:
            Text('The user $name [$id] is created at $createdat with job $job'),
      ),
    );
  }
}

Answer 1

    import 'package:flutter/material.dart';
    import 'package:http/http.dart' as http;
    import 'package:http_req_advanced/usermodel.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      const MyApp({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'HTTP Request 2',
          home: MyHomePage(),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      var users;
      Future<UserModel> createUser(String name, String job) async {
        final apiUrl = "https://reqres.in/api/users";
        final response =
            await http.post(Uri.parse(apiUrl), body: {"name": name, "job": job});
    
        if (response.statusCode == 201) {
          users = userModelFromJson(response.body);
        } else
          throw Exception('Failed to load');
        return users;
      }
    
      late UserModel user;
    
      final nameController = TextEditingController();
      final jobController = TextEditingController();
      @override
      Widget build(BuildContext context) {
        return SafeArea(
          child: Scaffold(
            appBar: AppBar(
              title: Text('HTTP Request'),
            ),
            body: Container(
              padding: EdgeInsets.all(16),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  TextField(
                    controller: nameController,
                  ),
                  TextField(
                    controller: jobController,
                  ),
                  user != null
                      ? _showData(user.name, user.job, user.id, user.createdAt)
                      : Container(),
                      //Text(
                      // "The user ${user.name} ${user.id} is created at ${user.createdAt} with job${user.job}"),
                      ElevatedButton(
                          onPressed: () async {
                            final String name = nameController.text;
                            final String job = jobController.text;
    
                            final UserModel userr = await createUser(name, job);
    
                            setState(() {
                              user = userr;
                            });
                          },
                          child: Text('Make a Request'),
                        ),
                ],
              ),
            ),
          ),
        );
      }
    
      Widget _showData(String name, String job, String id, DateTime createdat) {
        return Container(
          alignment: Alignment.bottomCenter,
          child: SizedBox(
            height: 32,
            child:
                Text('The user $name [$id] is created at $createdat with job $job'),
          ),
        );
      }
    }

Answer 2

而不是使用后期初始化：

late UserModel user;

使用：

UserModel? user;

当您使用 late 时，您声明了一个稍后将被初始化的非空变量，在这种情况下您不需要使用 late 因为 user 可以为空.

Flutter post HTTP 请求

Flutter post HTTP request

api

post

http

dart

flutter