barrierDismissible in showGeneralDialog is not working with Scaffold

Question

I am still new with Flutter. I try to make my dialog to be able to dismiss when click outside of the dialog. However if i use Scaffold, the barrierDismissible:true is not working. I tried to use Wrap but an error : No Material widget found will be displayed. Is there any idea on how to dismiss the dialog?

This is my code:

showGeneralDialog(
     barrierDismissible: true,
       pageBuilder: (context, anim1, anim2) {
         context1 = context;
          return StatefulBuilder(
             builder: (context, setState) {
                return Scaffold(
                    backgroundColor: Colors.black .withOpacity(0.0),
                        body:  Align(
                          alignment: Alignment.bottomCenter,
                          child: Container(
                               child: InkWell()
                                   )
                                  )
                                }
                              }
                            )

Answer 1

Scaffold is not required to display showGeneralDialog. The Material widget was required in your code because the InkWell widget needs a Material ancestor. You could use any widget that provides material such as Card or Material widget itself. Also barrierLabel cannot be null.

Please see the working code below or you can directly run the code on Dartpad https://dartpad.dev/6c047a6cabec9bbd00a048c972098671

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text("showGeneralDialog Demo"),
        ),
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
        onPressed: () {
          showGeneralDialog(
            context: context,
            barrierDismissible: true,
            barrierLabel:
                MaterialLocalizations.of(context).modalBarrierDismissLabel,
            barrierColor: Colors.black54,
            pageBuilder: (context, anim1, anim2) {
              return Center(
                child: Container(
                  width: 200,
                  height: 100,
                  child: StatefulBuilder(
                    builder: (context, snapshot) {
                      return const Card(
                        color: Colors.white,
                        child: Center(
                          child: InkWell(
                            child: Text(
                              "Press outside to close",
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      );
                    },
                  ),
                ),
              );
            },
          );
        },
        child: const Text("Show Dialog"));
  }
}

Answer 2

For anyone who needs to use a Scaffold in their AlertDialogs (perhaps to use ScaffoldMessenger), here is the simple work around:

Wrap the Scaffold with an IgnorePointer. The "barrierDismissible" value will now work.

  @override
  Widget build(BuildContext context) {
    return IgnorePointer(
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: AlertDialog(
          title: title,
          content: SizedBox(
            width: MediaQuery.of(context).size.width,
            child: SingleChildScrollView(
              child: ListBody(
                children: content
              ),
            ),
          ),
          actions: actions,
          insetPadding: const EdgeInsets.all(24.0),
          shape: Theme.of(context).dialogTheme.shape,
          backgroundColor: Theme.of(context).dialogTheme.backgroundColor,
        )
      ),
    );
  }