Navigator expands BottomSheet to full-screen

Question

I am experiencing a problem using Navigator within a BottomSheet.

Using Navigator expands the BottomSheet to full screen, while removing it adjusts its height according to the content.

In my case, the Navigator is needed to be able to push to a later view within the BottomSheet.

The desired behaviour would be dynamic height according to content and not full-screen expansion.

Code example:

 await showModalBottomSheet<void>(
  isDismissible: true,
  useSafeArea: true,
  isScrollControlled: true,
  backgroundColor: Colors.transparent,
  context: blocContext,
  builder: (BuildContext context) {
    return Navigator(
      onGenerateRoute: (context) => MaterialPageRoute<ModalRoute>(
        fullscreenDialog: false,
        builder: (context) => Container(
          color: Colors.white,
          child: Stack(
            fit: StackFit.loose,
            children: [
              CustomScrollView(
                shrinkWrap: true,
                slivers: [
                  SliverToBoxAdapter(
                    child: Container(
                      height: 50,
                      width: 50,
                      color: Colors.yellow,
                    ),
                  ),
                  SliverList.separated(
                    itemCount: 5,
                    itemBuilder: (context, index) {
                      return Container(
                        height: 30,
                        color: Colors.green,
                      );
                    },
                    separatorBuilder: (context, index) {
                      return gapH20;
                    },
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  },
);

Answer 1

Returning Container will cover the full space. You can wrap with another Align widget.

return Navigator(
  onGenerateRoute: (context) => MaterialPageRoute<ModalRoute>(
    fullscreenDialog: false,
    builder: (context) => Align(
      alignment: Alignment.bottomCenter, //this
      child: Container(
        color: Colors.white,

More about layout/constraints.

Also if you don't need Navigator you can use BottomSheet, DisplayFeatureSubScreen,DraggableScrollableSheet,

    builder: (BuildContext context) {
      return DisplayFeatureSubScreen(
        child: Container(
          color: Colors.white,
          child: Stack(
            fit: StackFit.loose,