如何在flutter的用戶界面/螢屏中設定Api回應資訊，如{成功或不成功-資訊}？

我想在螢屏上顯示訊息，或在工具列或AlertDialog上顯示從api回應中獲得的訊息，

那么如何獲得API回應資訊呢？

這是我在api_manager.dart檔案中驗證OTP的函式，如下所示。

現在，我如何將小吃店傳遞給我的螢屏？

Future validateOtp(BuildContext context, String otp, LogedinUser? userData,
      UserPlan? userPlan) async {
    final String otpUrl = "$baseUrl/otp/validate" ;
    var formData = FormData.fromMap({
      'user_id'/span>: userData!.userId,
      'otp': otp,
      'device_id': userData.deviceId。
    });
    var response = await dio.post(otpUrl, data: formData) 。

    final validateOtpData = validateOtpFromJson（response.data）。
    final status = validateOtpData.success;

    print（response.data）。

    if (response.statusCode == 200) {
      var res = response.data;
      print（userData.userId）。
      print（userData.deviceId）。
      print(otp)。
      print(res)。
      if (status == 1) {
        Navigator.push(
          背景關系。
          MaterialPageRoute(
            builder: (context) => DashBoard(
              user: userData,
              userPlan: userPlan,
            ),
          ),
        );
        return狀態。
      } else if （status == 0） {
        final apiMsg = validateOtpData.msg;
        final snackBar =
            SnackBar(content: Text(apiMsg!), backgroundColor: Colors.gray)。
        ScaffoldMessenger.of(context).showSnackBar(snackBar)。
      }
    }
  }

這是我的OTP驗證螢屏。

@override
  void initState() {
    super.initState（）。

    ApiManager().validateOtp(context, otp, userData, userPlan).then((apiMsg) {
      setState(() {
        //msg = apiMsg;.
      });
    });
  }

 @override
  Widget build(BuildContext context) {
    return Column(
      兒童。[
        OtpTextField(
          numberOfFields: 6,
          fieldWidth: 43,
          focusedBorderColor: Colors.black,
          onSubmit: (String otpValue) {
            setState(() {
              otp = otpValue。
            });
          },
        ),
        提升的按鈕(
          onPressed: () {
            ApiManager().validateOtp(context, otp, userData, userPlan)。
          },
          孩子。Text("Verify")。
        )
      ],
    );
  }

這里是無效或過期的OTP的回應。

而這是有效的OTP回應。

下面是驗證OTP回應。

下面是validate_otp.dart檔案中的驗證OTP模型類。

//要決議這個JSON資料，請執行。
//
//最終 validateOtp = validateOtpFromJson(jsonString);

import 'dart:convert';

ValidateOtp validateOtpFromJson(String str) =>
    ValidateOtp.fromJson(json.decode(str))。

String validateOtpToJson(ValidateOtp data) => json.encode(data.toJson() )。

class ValidateOtp {
  ValidateOtp({
    required this.success,
    required this.msg,
  });

  int success;
  String? msg;

  factory ValidateOtp.fromJson(Map<String, dynamic> json) => ValidateOtp(
        success: json["success"/span>] == null ? null : json["success"] 。
        msg: json["msg"/span>] == null ? null : json["msg"] 。
      );

  Map<String, dynamic> toJson（）=> {
        //忽略: unnecessary_null_comparison。
        "success": success == null ? null : success,
        "msg": msg == null ? null : msg,
      };
}

因此，當OTP不正確或過期時，我想在驗證OTP螢屏上顯示OTP是過期或無效的api回應。

謝謝你。

uj5u.com熱心網友回復：

下面的片段應該有幫助。它讓你對如何實作你的目的有一個非常基本的想法。

N.B: 例子只是一個抽象的解釋

 import 'package:flutter/material.dart'/span>。

void main() {
  runApp(MaterialApp(home: OTP(),))。
}

class OTP extends StatefulWidget{
  @override
  _OTPState createState() => _OTPState();
}

class _OTPState extends State< OTP> {
  String error = ";

  Future OtpValidation() async{
    error= "Error occured";
  }

  Future validateOtp() async {
   await OtpValidation(); /Do your Networking & logic
    setState(() {})。
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: !error.isEmpty
          ? Text(error)
          : 欄目()
        兒童。[
          ElevatedButton(
            onPressed: () {validateOtp();},
            孩子。Text("Validate OTP")。
          ),
        ],
      ),
    );
  }
}

CodePudding

你的模型ValidateOtp暴露了資料成員msg，你可以用它來訪問收到的JSON中的 "msg "欄位。

只要做

var response = await dio.post(otpUrl, data: formData) 。
final validateOtpData = validateOtpFromJson（response.data）。
final apiMsg = validateOtpData.msg;
final status = validateOtpData.success;

print(apiMsg!) 。

請記住，validateOtpData.msg在驗證成功的情況下將為空，所以你必須適當地處理這種情況。

現在，為了在成功或失敗時顯示一個滾動條，你可以做這樣的事情

對于context變數，你必須從你試圖顯示零食欄的部件中傳遞一個額外的BuildContext。因此，改變你的函式引數，看起來像

現在當你試圖呼叫該函式時，也要傳遞context。

標籤：

上一篇：如何在python中獲得多項式的系數

下一篇：semilogy,loglog不作業，以便在對數尺度上設定y軸。