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()
                                   )
                                  )
                                }
                              }
                            )

Solution

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"));
  }
}

Comments

[FenFen]

thanks for the explaination! I have better understanding now and it works! Thanks

[hemandroid]

Nice explanation with clear example.