title: Display a particular data from a json response after a POST call in the UI using flutter
body: <p>I am calling a POST request API that takes the inputs and then returns his/her details. So I have implemented most of it and I am able to retrieve the data from the API and print that response data in the terminal. But I need to display that data in the UI. I have added a check that whether the snapshot has data or not, so every time I perform the to display the data I am unable to do that and also since I am handling the API calls it always prints the something have gone wrong.</p>
  <p>I am attaching my code snippets so that they might help you understand where I am going wrong.
  Also, refer to all the comments I have made wherever I thought I am making mistake.</p>
  <p><strong>API calling function:</strong></p>
  <pre><code>Future&lt;PanCardVerify&gt; panCardVerify(dynamic param) async {
  var client = http.Client();
  String? token = await storage.readSecureToken('key');
  if (token == null) {
    throw Exception(&quot;No token stored in storage&quot;);
  }
  try {
    var response = await client
        .post(
            Uri.https(&quot;baseURL&quot;, &quot;endpoint&quot;),
            headers: &lt;String, String&gt;{
              'Authorization': 'Token $token',
            },
            body: param)
        .timeout(Duration(seconds: TIME_CONST))
        .catchError(handleError);
  
    if (response.statusCode == 200) {
      print('Response Body: ${response.body}');
      final data = await jsonDecode(response.body);
      return PanCardVerify.fromJson(data); //This is where I believe I am supposed to return to the snapshot
      );
    } else if (response.statusCode == 400) {
      print(&quot;Invalid PAN Card Details&quot;);
      return param;
    } else {
      print(&quot;Bad Input&quot;);
      return param;
    }
  } on SocketException {
    throw FetchDataException('message', 'url'); 
  } on TimeoutException {
    throw ApiNotRespondingException(&quot;message&quot;, &quot;url&quot;);
  }
  }
  </code></pre>
  <p><strong>Model Class:</strong></p>
  <pre><code>import 'dart:convert';
  
  PanCardVerify transactionFromJson(String str) =&gt;
      PanCardVerify.fromJson(json.decode(str));
  
  String transactionToJson(PanCardVerify data) =&gt; json.encode(data.toJson());
  
  class PanCardVerify {
    PanCardVerify({
      required this.status,
      this.panData,
    });
  
    String status;
    PanData? panData;
  
    factory PanCardVerify.fromJson(Map&lt;String, dynamic&gt; json) =&gt; PanCardVerify(
          status: json[&quot;status&quot;],
          panData: PanData.fromJson(json[&quot;pan_data&quot;]),
        );
  
    Map&lt;String, dynamic&gt; toJson() =&gt; {
          &quot;status&quot;: status,
          &quot;pan_data&quot;: panData?.toJson(),
        };
  }
  
  class PanData {
    PanData({
      required this.code,
      required this.timestamp,
      required this.transactionId,
      required this.data,
    });
  
    int code;
    int timestamp;
    String transactionId;
    Data data;
  
    factory PanData.fromJson(Map&lt;String, dynamic&gt; json) =&gt; PanData(
          code: json[&quot;code&quot;],
          timestamp: json[&quot;timestamp&quot;],
          transactionId: json[&quot;transaction_id&quot;],
          data: Data.fromJson(json[&quot;data&quot;]),
        );
  
    Map&lt;String, dynamic&gt; toJson() =&gt; {
          &quot;code&quot;: code,
          &quot;timestamp&quot;: timestamp,
          &quot;transaction_id&quot;: transactionId,
          &quot;data&quot;: data.toJson(),
        };
  }
  
  class Data {
    Data({
      required this.entity,
      required this.pan,
      required this.fullName,
      required this.status,
      required this.category,
    });
  
    String entity;
    String pan;
    String fullName;
    String status;
    String category;
  
    factory Data.fromJson(Map&lt;String, dynamic&gt; json) =&gt; Data(
          entity: json[&quot;@entity&quot;],
          pan: json[&quot;pan&quot;],
          fullName: json[&quot;full_name&quot;],
          status: json[&quot;status&quot;],
          category: json[&quot;category&quot;],
        );
  
    Map&lt;String, dynamic&gt; toJson() =&gt; {
          &quot;@entity&quot;: entity,
          &quot;pan&quot;: pan,
          &quot;full_name&quot;: fullName,
          &quot;status&quot;: status,
          &quot;category&quot;: category,
        };
  }
  </code></pre>
  <p><strong>Exception Controller Class:</strong></p>
  <pre><code>class BaseController {
    void handleError(error) {
      hideLoading();
      if (error is BadRequestException) {
        var message = error.message;
        DialogHelper.showErroDialog(description: message);
      }  else if (error is SocketException) {
        print(error);
      } else {
        print(&quot;Error in the else block&quot;);
      }
    }
  </code></pre>
  <p><strong>Widget where I am trying to display the <em>fullName</em>:</strong></p>
  <pre><code>FutureBuilder&lt;PanCardVerify&gt;(
                    future: ApiService().panCardVerify(context),
                    builder: (context, snapshot) {
                      if (snapshot.hasData) {
                        PanData? data = snapshot.data!.panData;
                        return Flexible(
                          child: Text('${data!.data.fullName}'),
                        );
                      } else {
                        return Text(&quot;Something went wrong&quot;);
                      }
                    }),
  </code></pre>