Flutter - Dialog not showing data

IAntonov
November 25, 2024
72 views
1 vote
2 Answers

I am trying to get data from an API, which I did successfully, and show the data in a dialog box on my Flutter App.

Initially what I did was create a function void _showDialog() right after the function where I am getting the data from the API and not only did it not work, the dialog box wasn’t showing also. So after searching around a bit I modified my code and used the following. The dialog box is now being shown, but I still cannot see the data inside the dialog.

@override
  void initState() {
    super.initState();
    fetchDialogData();
    fetchData();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            content: Html(data: _dnContent),
            actions: [
              TextButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                child: const Text('close'),
              ),
            ],
          );
        },
      );
    });
    fetchHomeBodyContent();
  }

  Future<void> fetchDialogData() async {
    var headers = AppConstants.apiHeaders;
    var request = http.MultipartRequest(
        'POST',
        Uri.parse(
            $my_url));
    request.fields.addAll(AppConstants.apiBody);
    request.headers.addAll(headers);

    http.StreamedResponse response = await request.send();

    if (response.statusCode == 200) {
      var responseBody = await response.stream.bytesToString();
      final data = json.decode(responseBody);
      final nestedDescriptionData =
          data['response']['RESULT'][0]['description'];
      final descriptionData = json.decode(nestedDescriptionData);
      final dnContent = dnDescriptionData['dn'];

      setState(() {
        _dnContent = dnContent;
      });
    }
  }

Answers

I created only a simple example for you complete in your project:

import 'package:flutter/material.dart';

class test0 extends StatefulWidget {
  const test0({super.key});

      @override
      State<test0> createState() => _testState();
    }
    
    Widget? _dnContent;
    
    class _testState extends State<test0> {
      @override
      void initState() {
        _dialogBuilder(context);
        //fetchData();
        //fetchHomeBodyContent();
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) {
        return Container();
      }
    }
    
    Future<void> _dialogBuilder(BuildContext context) async {
      final dnContent = Text('ok');
      _dnContent = dnContent;
      Future.delayed(const Duration(seconds: 1), () { //only used to create a delayed, remove it
        if (200 == 200) {//the same as if (response.statusCode == 200) {
          showDialog(
            context: context,
            builder: (BuildContext context) {
              return AlertDialog(
                content: _dnContent,
                actions: [
                  TextButton(
                    onPressed: () {},
                    child: const Text('close'),
                  ),
                ],
              );
            },
          );
        }
      });
    }

You can use await for fetchDialogData methods like.

      @override
      void initState() {
        super.initState();
        fetchData();
        WidgetsBinding.instance.addPostFrameCallback((_) async{
        await fetchDialogData();
       
          showDialog(
            context: context,
            builder: (BuildContext context) {
              return AlertDialog(
                content: Html(data: _dnContent),
                actions: [
                  TextButton(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: const Text('close'),
                  ),
                ],
              );
            },
          );
        });
        fetchHomeBodyContent();
      }

However, since you haven’t provided details about the other two methods, I recommend handling them based on their behaviour and importance in your workflow.

Please signup or login to give your own answer.

Click here to cancel reply.

Flutter – Dialog not showing data

Answers