Dialog shows up in Widgetbook instead of the simulated device

[jttuboi]

Description
Executing Widgetbook in web flutter, you want to simulate a Dialog inside the device, and it's showing inside of web page.
Check the screenshot for more detail.

Steps To Reproduce

WidgetbookCategory(name: 'asd1', widgets: [
    WidgetbookComponent(
      name: 'asd2',
      useCases: [
        WidgetbookUseCase(
          name: 'asd3',
          builder: (context) {
            return ElevatedButton(
              onPressed: () => showDialog(
                context: context,
                builder: (_) => AlertDialog(
                  content: Container(color: Colors.amber, height: 100, width: 100),
                ),
              ),
              child: const Text('show'),
            );
          },
        )
      ],
    ),
  ]),

Expected Behavior
I expect the Dialog is showed inside the device.

Screenshots

[jenshor]

In addition to the fix you also have to make sure to set the useRootNavigator to false, otherwise the showDialog will look for the root Navigator (which is the one of Widgetbook and not the one of the previewed app) and you'll see the same behaviour.

[tieorange]

This solution does not work with bottom sheet

It still is drawn outside of the device frame

Code:
final result = await showModalBottomSheet( isScrollControlled: true, shape: const RoundedRectangleBorder( borderRadius: BorderRadius.vertical(top: Radius.circular(15)), ), barrierColor: kcBottomSheetBarrierColor, backgroundColor: kcWayfinderWhite, context: context, useRootNavigator: false, builder: (context) => child, );