POST请求颤动返回null

Question

假设有 3 个整数值（红、绿、蓝）和字符串中的结果，执行该值后的预测。我认为问题在于 api 无法读取我在颤振中声明的字符串。由于控制器无法读取整数，因此我很难识别和更改颤振中的数据类型。

ma​​in.dart

import 'package:flutter/material.dart';
import 'package:flutter_http_post/rgbModel.dart';
import 'package:http/http.dart' as http;

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  RgbModel? _rgbcolor;

  final TextEditingController rController = TextEditingController();
  final TextEditingController gController = TextEditingController();
  final TextEditingController bController = TextEditingController();

  Future<RgbModel> createRGB(String red, String green, String blue) async {
    final response = await http.post(Uri.parse('http://10.0.2.2:8000/predict/'),
        body: {"red": red, "green": green, "blue": blue});
    if (response.statusCode == 200 || response.statusCode == 422) {
      final String responseBody = response.body;
      return rgbModelJson(responseBody);
    } else {
      throw Exception("Failed");
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          padding: EdgeInsets.all(10),
          child: Column(
            children: [
              TextField(
                controller: rController,
                decoration: InputDecoration(hintText: 'Enter Value R'),
              ),
              TextField(
                controller: gController,
                decoration: InputDecoration(hintText: 'Enter Value G'),
              ),
              TextField(
                controller: bController,
                decoration: InputDecoration(hintText: 'Enter Value G'),
              ),
              SizedBox(
                height: 10,
              ),
              _rgbcolor == null
                  ? Container()
                  : Text('The prediction ${_rgbcolor?.color}'),
              ElevatedButton(
                  onPressed: () async {
                    var rd = rController.text;
                    var grn = gController.text;
                    var bl = bController.text;

                    final RgbModel? usercolor = await createRGB(rd, grn, bl);

                    setState(() {
                      _rgbcolor = usercolor;
                    });
                  },
                  child: Text('Post'))
            ],
          ),
        ),
      ),
    );
  }
}

rgbModel.dart

import 'dart:convert';

RgbModel rgbModelJson(String str) => RgbModel.fromJson(json.decode(str));

String userModelToJson(RgbModel data) => json.encode(data.toJson());

class RgbModel {
  String? color;
  String? red;
  String? green;
  String? blue;

  RgbModel({
    this.color,
    this.red,
    this.green,
    this.blue,
  });

  factory RgbModel.fromJson(Map<String, dynamic> json) => RgbModel(
        color: json["color"],
        red: json["red"].toString(),
        green: json["green"].toString(),
        blue: json["blue"].toString(),
      );

  Map<String, dynamic> toJson() => {
        "color": color,
        "red": red,
        "green": green,
        "blue": blue,
      };
}

在调试控制台 vscode 中不要给出我的代码的错误结论。

不幸的是，颤振返回null

我使用 FastAPI，这是在执行红色、绿色、蓝色值后给出我想要的值的 API 响应。返回的是 rgb 值（“黑色”）

Answer 1

您的 API 返回类似 {"prediction" : "black"} 的数据

您的处理方式是致电rgbModelJson(responseBody)

函数会调用这个

factory RgbModel.fromJson(Map<String, dynamic> json) => RgbModel(
        color: json["color"],
        red: json["red"].toString(),
        green: json["green"].toString(),
        blue: json["blue"].toString(),
      );

在这个函数中，它试图找到键color、red、green和blue， 而只有prediction。因此，json["color"] ,json["red"] ,json["green"] ,json["blue"] 将得到null。这意味着您使用返回的数据创建了一个对象，但它的所有参数都是null。

当您尝试在屏幕中获取Text('The prediction ${_rgbcolor?.color}') 时，它总是null。

我有两种方法可以解决：

第一个是改变功能，如：

factory RgbModel.fromJson(Map<String, dynamic> json) => RgbModel(
        color: json["prediction"],
        red: json["red"].toString(),
        green: json["green"].toString(),
        blue: json["blue"].toString(),
      );

但是当你尝试像_rgbcolor.red 一样时，它仍然是空的。如果您需要该值，您可以使用 textEditingController 中的值来更改它。

第二个是改变你的API返回格式

{
    "color" : "black",
    "red" : 0,
    "green" : 0,
    "blue" : 0,
}