Show Flutter dialog only on part of the screen

user_6743114 0
Viewed 531

On a Dialog, you can set barrierDismissible to false if you want to disable touch events outside of the dialog. However, it is possible to listen to these touch events only on some part of the screen eg. AppBar?

I made an illustration to help you understand my problem.enter image description here

dart flutter android-alertdialog dialog
1 Answers

We know that everything is Widget, so we can exploit this property to create our own Dialog. There are some possibilities to do what you want, but it depends a lot on the dynamics of your application. I think it would do as follows:

Calling the dialog as follows:

showDialog(
   context: context,
   barrierDismissible: false,
   child: DialogFeelingCalendar(),
);

And it uses a widget to personalize. Like this:

class DialogFeelingCalendar extends StatefulWidget {
     @override
     _DialogFeelingCalendarState createState() => _DialogFeelingCalendarState();
    }

class _DialogFeelingCalendarState extends State<DialogFeelingCalendar> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      appBar: AppBar(
        title: Text(
           "Title",
            style: TextStyle(
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
      ),
      body: SafeArea(
        child: Center(
          child: Container(
            color: Colors.white,
            height: 50,
            width: 50,
          ),
        ),
      )
    );
  }
}

I hope you can customize it for your use. Tell me if you need more details.

user_84264150
Related