Is it possible to disable shadow/overlay on dialog?

Question

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:

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.

Answer 1

I have achieved the result using below code. Trick is barrierColor property in showDialog method which I set white color with opacity value zero and barrier shadow is vanished

AlertDialog alert = AlertDialog(
    backgroundColor: Colors.transparent,
    elevation: 0,
    content: new Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Loader(),
      ],
    ),
  );
  showDialog(
    barrierColor: Colors.white.withOpacity(0),
    barrierDismissible: false,
    context: context,
    builder: (BuildContext context) {
      return WillPopScope(
            onWillPop: (){},
          child: alert);
    },
  );

Answer 2

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:

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: null,
  transitionDuration: const Duration(milliseconds: 150));