Why dialog not disappearing when using showDialog?

Question

I am using tabBar.If I click on the first tab and on the second tab many times and very fast then showDialog(loading) not disappearing. It stays on the screen eternally. I tried to fix that for a long time but I can't find a solution

This is the code of the first tab(widget not converted in BlocConsumer):

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

  @override
  State<FirstWidget> createState() => _FirstWidgetState();
}

class _FirstWidgetState extends State<FirstWidget> {
  @override
  Widget build(BuildContext context) {
    return TabBar(
  onTap: (index) async {
    if (index == 0) {

    final connectivityResult = await (Connectivity().checkConnectivity());
    if (connectivityResult == ConnectivityResult.wifi ||
      connectivityResult == ConnectivityResult.ethernet) {
        showWaiting(context); // Here is the loader, if I remove it then loader won't show up when I get data. So I just put it here and because of him my app is freezing
        BlocProvider.of<StatisticsCubit>(context).getData();
      }
    }
    },
    tabs: [
      Tab(
        icon: SizedBox(
        width: 60.w,
          child: Column(
            children: [
              Text(
                "First",
                style: TextStyle(
                fontSize: 14.sp,
                fontWeight: FontWeight.w500,
                height: 1,
                color: Colors.white
                ),
              ),
              ],
            ),
        ),
      ),
      Tab(
        icon: SizedBox(
        width: 60.w,
          child: Column(
            children: [
              Text(
                "Second",
                style: TextStyle(
                fontSize: 14.sp,
                fontWeight: FontWeight.w500,
                height: 1,
                color: Colors.white
                ),
              ),
              ],
            ),
        ),
      )
    ],
  );
  }
}

This is the widget when I press seconds tab:

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

  @override
  State<SecondWidget> createState() => _SecondWidgetState();
}

class _SecondWidgetState extends State<SecondWidget> {
  @override
  Widget build(BuildContext context) {
    return BlocConsumer<StCubit, StState>(
      listener: (context, state) {
        if (state is Waiting) {
          showWaiting(context, false);
        }
        if (state is Success) {
          Navigator.of(context, rootNavigator: true).pop();
        }
      },
      builder: (context, state) {
        return Container();//content
      },
    );
  }
}

This is a loader:

Future<void> showWaiting(BuildContext context) {
  return showDialog(
    context: context,
    builder: (BuildContext context) => Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      color: Colors.black.withOpacity(0.5),
      child: const Center(
        child: CircularProgressIndicator(
          strokeWidth: 1,
          color: Colors.black,
          backgroundColor: Colors.white,
        ),
      ),
    )
  );
}

The loader not disappearing when I click many times on the first and the second tab

Answer 1

It is because there is high possibility that the dialogs are getting stacked up, So you have to first pop the existing dialog before showing the new one.

Try the updated code.

Future<void> showWaiting(BuildContext context) async {
  // Dismiss any previously shown dialog
  Navigator.of(context, rootNavigator: true).pop(); // This should possibly fix the issue

  // Show the new dialog
  await showDialog(
    context: context,
    builder: (BuildContext context) => Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      color: Colors.black.withOpacity(0.5),
      child: const Center(
        child: CircularProgressIndicator(
          strokeWidth: 1,
          color: Colors.black,
          backgroundColor: Colors.white,
        ),
      ),
    ),
  );
}