dialogflutteroverlayshadow

Is it possible to disable shadow/overlay on dialog?

I'm wondering if there's a way to disable the shadow/overlay affect a dialog has? Basically so I can get a dialog looking like it does on the right side of this image:

My best attempt at this was to use a stack containing my custom dialog which are then toggled to be displayed or not but then I had trouble being able to scroll each custom dialog's own ListView without it messing up another. I know this goes against the Material Design guidelines but I'm trying to replicate a UI from dribble.com.

Thanks!

Edit:

I've managed to almost achieve this affect by editing the showGeneralDialog method but there's still an elevation shadow:

await showGeneralDialog(
    context: context,
    pageBuilder: (BuildContext buildContext,
        Animation<double> animation,
        Animation<double> secondaryAnimation) {
      return SafeArea(
        child: Builder(builder: (context) {
          return AlertDialog(
             content: Container(
                 color: Colors.white,
                 width: 150.0,
                 height: 150.0,
                 child: Center(child: Text("Testing"))));
        }),
      );
    },
    barrierDismissible: true,
    barrierLabel: MaterialLocalizations.of(context)
        .modalBarrierDismissLabel,
    barrierColor: null,
    transitionDuration:
        const Duration(milliseconds: 150));

Edit 2: Just an image to illustrate the change on the above code showing that I've so far been able to disable the dark overlay but there's still elevation on the dialog which I can't seem to get rid of:

enter image description here

Edit 3: I think if I'm able to change the AlertDialog in the showGeneralDialog's Builder then I can get it to work but I'm having trouble putting in something which is Material but doesn't take up the whole screen.

Solution

  • Got it to work! You have to create your own dialog like Widget within the Builder of the showGeneralDialog method along with setting the barrierColor to null:

    enter image description here

    await showGeneralDialog(
  context: context,
  pageBuilder: (BuildContext buildContext,
      Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return SafeArea(
      child: Builder(builder: (context) {
        return Material(
            color: Colors.transparent,
            child: Align(
                alignment: Alignment.center,
                child: Container(
                    height: 200.0,
                    width: 250.0,
                    color: Colors.white,
                    child:
                        Center(child: Text('Testing')))));
      }),
    );
  },
  barrierDismissible: true,
  barrierLabel: MaterialLocalizations.of(context)
      .modalBarrierDismissLabel,
  barrierColor: Colors.transparent,
  transitionDuration: const Duration(milliseconds: 150));