Why is showModalBottomSheet covers bottomNavigationBar, while showBottomSheet displayed on top of it position-wise?

Question

I have an application (simplified) that looks like this:
working dartpad example: https://dartpad.dev/cc4e524315e104c272cd06aa7037aa10

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
        bottomNavigationBar: BottomWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, World!');
  }
}

class BottomWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return BottomAppBar(
      child: InkWell (
        child: Container(
          height:100,
          color: Colors.pink,
          child: Center(
            child: Text('this is a bottom navigation bar')
          ),
        ),
        onTap: () {
          showModalBottomSheet(
            context: context,
            builder: (context) => Container(),
          );
        }
      ),
    );
  }
}

My question is, I want to use showModalBottomSheet to stop user from interacting with the screen, but I need bottomNavigationBar to be shown like this:

Right now it just covers everything including the bottomNavigationBar:

If I change it to showBottomSheet, it works perfectly like the first picture.

Why is their behaviour different?
How can I achieve the result that I want using showModalBottomSheet?

Answer 1

showModalBottomSheet show bottom sheet on top of all widget and layers, if you want to show it under bottomNavigationBar you should use Stack in parent and use a single child into that. its not easy to take a sample and that take a long time to reproduce pseudo code