skip to Main Content

I want to show 2 diiferent dialog box at some interval but it gives me error.

First I want to show circular loading dialog and after some interval I want to show the another one. But I didn’t know where I’m wrong. Please help me to solve this

Here is the code that I’m working on……

import 'dart:async';

import 'package:whatsapp/exports.dart';

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

  @override
  State<DialogWidgets> createState() => _DialogWidgetsState();
}

class _DialogWidgetsState extends State<DialogWidgets> {
  bool showLoadingWidget = true;

  dynamic assignWidget;

  Future<Widget> updateWidget() async {
    await Timer.periodic(Duration(seconds: 10), (timer) {
      setState(() {
        assignWidget = editNumberDialogBox();
      });
    });
    return assignWidget;
  }

  @override
  Widget build(BuildContext context) {
    updateWidget();
    return Scaffold(
      body: Center(
        child: assignWidget == null ? circularDialogBox() : assignWidget,
      ),
    );
  }

  editNumberDialogBox() {
    return showDialog(
      context: context,
      builder: (context) {
        return Dialog(
          child: Container(
            height: 220,
            width: 320,
            color: Colors.white,
            padding: EdgeInsets.all(20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  "You entered the phone number",
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.w400,
                  ),
                ),
                SizedBox(height: 20),
                Text(
                  "+91 88665 77577",
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(height: 20),
                Text(
                  "Is this OK, or would you like to edit the number?",
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.w400,
                  ),
                ),
                Spacer(),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    TextButton(
                      onPressed: () {
                        Navigator.pop(context);
                      },
                      child: Text(
                        "EDIT",
                        style: TextStyle(
                          color: green,
                          fontSize: 16,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    ),
                    TextButton(
                      onPressed: () {
                        Navigator.pop(context);
                      },
                      child: Text(
                        "OK",
                        style: TextStyle(
                          color: green,
                          fontSize: 16,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    ),
                  ],
                )
              ],
            ),
          ),
        );
      },
    );
  }

  circularDialogBox() {
    return showDialog(
      context: context,
      builder: (context) {
        return Dialog(
          child: Container(
            height: 85,
            width: 380,
            color: Colors.white,
            padding: EdgeInsets.symmetric(horizontal: 20),
            child: Row(
              children: [
                CircularProgressIndicator(color: green),
                SizedBox(width: 20),
                Text(
                  "Connecting...",
                  style: TextStyle(
                    fontSize: 16,
                    color: Colors.black45,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

And this code only loads circular dialog box and give error like this….

enter image description here

Help me to solve this 🙂

2

Answers


  1. Try this,

     @override
      void initState() {
        super.initState();
        WidgetsBinding.instance!.addPostFrameCallback((_) {
          updateWidget();
        });
      }
    

    and renove updateWidget() function from build.

    Login or Signup to reply.
  2. Your code is bad, first of all, you are putting as a Widget class a Dialog, that you use as a function, in your child you will only have an empty Container() because you will not show anything in the build.

    You need to put the function initState, this is called and executed when the Stateful loads, so first you call your Loading and then you call the function with your Timer.

    Try like this :

    class _TestPageState extends State<TestPage> {
      bool showLoadingWidget = true;
    
      Future? assignWidget;
    
      @override
      void initState() {
        WidgetsBinding.instance.addPostFrameCallback((_) {
          circularDialogBox();
          updateWidget();
        });
    
        super.initState();
      }
    
      Future updateWidget() async {
        Timer.periodic(const Duration(seconds: 10), (timer) async {
          assignWidget = await editNumberDialogBox();
        });
        return assignWidget;
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: Container(),
          ),
        );
      }
    
      Future editNumberDialogBox() async {
        return showDialog(
          context: context,
          builder: (context) {
            return Dialog(
              child: Container(
                height: 400,
                width: 320,
                color: Colors.white,
                padding: const EdgeInsets.all(20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      "You entered the phone number",
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.w400,
                      ),
                    ),
                    const SizedBox(height: 20),
                    const Text(
                      "+91 88665 77577",
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    const SizedBox(height: 20),
                    const Text(
                      "Is this OK, or would you like to edit the number?",
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.w400,
                      ),
                    ),
                    const Spacer(),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        TextButton(
                          onPressed: () {
                            Navigator.pop(context);
                          },
                          child: const Text(
                            "EDIT",
                            style: TextStyle(
                              color: Colors.green,
                              fontSize: 16,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                        ),
                        TextButton(
                          onPressed: () {
                            Navigator.pop(context);
                          },
                          child: const Text(
                            "OK",
                            style: TextStyle(
                              color: Colors.green,
                              fontSize: 16,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                        ),
                      ],
                    )
                  ],
                ),
              ),
            );
          },
        );
      }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search