Why my TabBar is moveable when the dialog is shown flutter?

Question

So I want to create an add contact by QR function, I manage to do all the functionality and show the dialog when the QR is scanned, but the tab-bar is still moveable. I want when the dialog box is shown the tab bar is not tap-able. How can I do this?

Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Add by QR Code '),
          bottom: TabBar(
            controller: QRTabcontroller,
            tabs: <Widget>[
              Tab(text: 'Scan QR'),
              Tab(text: 'My QR Code'),
            ],
          ),
        ),
        body: Stack(
          children: [
            TabBarView(
              controller: QRTabcontroller,
              children: [
                ///Scan QR
                QRView(
                  key: qrKey,
                  onQRViewCreated: _onQRViewCreated,
                ),

                /// Show Qr Code
                Padding(
                  padding: EdgeInsets.only(top: 35),
                  child: Column(
                    children: [
                      QrImage(
                        data: user!.uid == null ? 'loading' : user!.uid,
                        size: 220,
                      ),
                    ],
                  ),
                ),
              ],
            ),
            if (barcode != null)
              barcode!.code.toString() == user!.uid
                  ? Dialog() : filteredId.contains(data['uid']) ?
                      Dialog()
                      :
                      Dialog()
          ],
        ),
      ),
    );
  }

Answer 1

make condition if dialog box is shown isScrollable false.

 bottom: TabBar(
        isScrollable: isShown ? false : true,
        controller: QRTabcontroller,
        tabs: <Widget>[
          Tab(text: 'Scan QR'),
          Tab(text: 'My QR Code'),
        ],
      ),

or disable background when dialog shown

showDialog(
  barrierDismissible: false,
  context: context,)

Answer 2

You can use the Loading Overlay plugin and application stack to prevent background clicks on using stack and Dialog. The stack will let users click the screen irrespective of the order of the widgets. You can implement the Dialog implementation like this:

class CustomPage extends StatefulWidget {
  const CustomPage({Key? key}) : super(key: key);

  @override
  State<CustomPage> createState() => _CustomPageState();
}

class _CustomPageState extends State<CustomPage> {

  Future openDialog() {
    return showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
              actions: [
                MaterialButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: const Text("Okay"),
                )
              ],
              title: const Text("My Dialog"),
              content: SizedBox(
                width: MediaQuery.of(context).size.width/1.5,
                child: const Center(child: Text("test")),
              ));
        });
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Add by QR Code '),
          bottom: const TabBar(
            // controller: QRTabcontroller,
            tabs: <Widget>[
              const Tab(text: 'Scan QR'),
              const Tab(text: 'My QR Code'),
            ],
          ),
        ),
        body: TabBarView(
          // controller: QRTabcontroller,
          children: [
            ///Scan QR
            QRView(
              key: qrKey,
              onQRViewCreated: _onQRViewCreated,
            ),

            /// Show Qr Code
            Padding(
              padding: const EdgeInsets.only(top: 35),
              child: Column(
                children: [
                  QrImage(
                    data: user!.uid == null ? 'loading' : user!.uid,
                    size: 220,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

On QR success callback() function, call the openDialog() with your required params. You can prevent dialog close on outside click with barrierDismissible property.