flutter bottomsheet cover bottom navigation

Question

i'm doing a project with google map. when i tap a circle on the google map, bottom sheet have to show. but when i do it with showModalBottomSheet, it covers bottomnavigationbar. and i don't want it. with showbottomsheet, i don't know how to close it when i tap other things. how can i solve it?

import 'package:eqms_test/widget/setting/setting.dart';
import 'package:flutter/material.dart';
import 'package:eqms_test/widget/eq_info/eq_info.dart';
import 'package:eqms_test/widget/eq_safety/eq_safety.dart';
import 'package:eqms_test/widget/sensor_info/sensor_info.dart';
import 'package:eqms_test/widget/sensor_map/sensor_map.dart';

class RootScreen extends StatefulWidget {
  const RootScreen({super.key});

  @override
  State<RootScreen> createState() => _RootScreenState();
}

class _RootScreenState extends State<RootScreen> with TickerProviderStateMixin{
  final PageController _controller = PageController();
  int selectedIndex = 0;

  @override
  void initState() {
    super.initState();
    print('RootScreen initState');
  }

  final List<Widget> widgetOptions = <Widget>[
    EQ_Info(),
    EQ_Safety(),
    Sensor_Map(),
    Sensor_Info(),
    Setting()
  ];

  void onItemTapped(int index){
    if (selectedIndex != index) {
      _controller.jumpToPage(index);
      setState(() {
        selectedIndex = index;
      });
    }
  }

  BottomNavigationBar renderBottomNavigationBar(){
    return BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.local_activity),
          label: 'EQ_Info',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.local_activity),
          label: 'EQ_Safety',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.local_activity),
          label: 'Sensor_Map',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.local_activity),
          label: 'Sensor_Info',
        ),BottomNavigationBarItem(
          icon: Icon(Icons.local_activity),
          label: 'Setting',
        ),
      ],
      type: BottomNavigationBarType.fixed,
      currentIndex: selectedIndex,
      unselectedItemColor: Colors.grey,
      selectedItemColor: Colors.deepOrange,
      onTap: onItemTapped,
    );
  }

  @override
  Widget build(BuildContext context) {
    print('RootScreen build');

    return Scaffold(
      body: PageView(
        controller: _controller,
        onPageChanged: onItemTapped,
        children: widgetOptions,
      ),
      bottomNavigationBar: renderBottomNavigationBar(),
      extendBody: false,
      extendBodyBehindAppBar: true,
    );
  }
}

This is RootScreen.dart

import 'package:eqms_test/Widget/google_map/models/GoogleMapMode.dart';
import 'package:eqms_test/Widget/google_map/google_map.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:convert';


class EQ_Info extends StatefulWidget {
  const EQ_Info({super.key});

  @override
  State<EQ_Info> createState() => _EQ_InfoState();
}

class _EQ_InfoState extends State<EQ_Info> with AutomaticKeepAliveClientMixin {
  GoogleMapMode mode = GoogleMapMode.shelter;

  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
    super.initState();
    getServerData();
    print('EQ_Info initState');
  }

  @override
  void dispose() {
    client.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.endTop,
      floatingActionButton: Padding(
        padding: EdgeInsets.only(left: 10, right: 20),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ActionChip(
              label: Text('eq info'),
              onPressed: () {
                setState(() {
                  if (mode != GoogleMapMode.EQinfo) mode = GoogleMapMode.EQinfo;});
                }),
            ActionChip(
              label: Text('shelter'),
              onPressed: () {
                setState(() {
                  if (mode != GoogleMapMode.shelter) mode = GoogleMapMode.shelter;});
                }),
               ActionChip(
              label: Text('empty'),
              onPressed: () {
                setState(() {
                  if (mode != GoogleMapMode.empty) mode = GoogleMapMode.empty;
                });
              },
            ),
          ],
        ),
      ),
      body: Google_Map(mode: mode,),
    );
  }

}

eq_info.dart

circles.add(
                Circle(
                  circleId: CircleId(value[i].id.toString()),
                  center: LatLng(value[i].latitude, value[i].longitude),
                  fillColor: Colors.blue.withOpacity(0.5),
                  radius: value[i].magnitude * 10000,
                  strokeColor: Colors.blueAccent,
                  strokeWidth: 1,
                  onTap: () {
                    BottomSheets.showCircleBottomSheet(context, value[i].id.toString());
                  },
                  consumeTapEvents: true,
                )

part of google_map.dart

import 'package:flutter/material.dart';

class BottomSheets {
  static void showCircleBottomSheet(BuildContext context, String data){
    showModalBottomSheet(
        context: context,
        builder: (context) {
          return GestureDetector(
            onTap: () {
              Navigator.pop(context);
            },
            child: Container(
              height: 150,
              color: Colors.white,
              child: Center(child: Text(data)),
            ),
          );
        },
      backgroundColor: Colors.transparent,
      barrierColor: Colors.transparent,
      isScrollControlled: true,
      useRootNavigator: true,
      // useSafeArea: true,
    );
  }
}

and bottomsheet that make bottomsheet.

I don't matter modal or not modal, i just want a bottom sheet that is closed when i tap other things, and not cover bottom navigation bar

as you see i tried useRootNavgiator, but it didn't work. i don't know why this happen

+) if there's any advice with this code, i will really appreciate it.

Answer 1

This was indeed problem of context. As I didn't pass the context in root screen which has bottom navgiator, bottomsheet didn't recognize the navigator.