Flutter Maps：带有动态添加标记的 onTap - showModalBottomSheet 返回错误

Question

我正在使用颤振从实时数据库中获取数据，并在谷歌地图上为每个元素添加一个标记。当用户单击其中一个标记时，我想弹出一个包含更多信息的底部工作表。但是，当我尝试使用以下代码执行此操作时，出现以下运行时错误：

E/flutter (25294): [ERROR:flutter/lib/ui/ui_dart_state.cc(209)] Unhandled Exception: No MediaQuery widget ancestor found.
E/flutter (25294): MyApp widgets require a MediaQuery widget ancestor.
E/flutter (25294): The specific widget that could not find a MediaQuery ancestor was:
E/flutter (25294):   MyApp
E/flutter (25294): The ownership chain for the affected widget is: "MyApp ← [root]"
E/flutter (25294): No MediaQuery ancestor could be found starting from the context that was passed to MediaQuery.of(). This can happen because you have not added a WidgetsApp, CupertinoApp, or MaterialApp widget (those widgets introduce a MediaQuery), or it can happen if the context you use comes from a widget above those widgets.

我曾尝试使用 _myContext（我在 build 方法中设置），但错误仍然存​​在。

这是我的 main.dart：

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_database/firebase_database.dart';
import 'dart:convert';

import 'package:petrol_finder/data/PetrolStation.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  BuildContext? _myContext;
  late GoogleMapController mapController;
  final petrolStationsDatabase = FirebaseDatabase(databaseURL:"[removed].firebasedatabase.app/").reference().child('petrolstations');
  final Set<Marker> markers = Set();

  bool _initialized = false;
  bool _error = false;
  bool _showModalBottomSheet = false;

  final LatLng _center = const LatLng(51.5074, -0.1272);


  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
  }

// Define an async function to initialize FlutterFire
  void initializeFlutterFire() async {
    try {
      // Wait for Firebase to initialize and set `_initialized` state to true
      await Firebase.initializeApp();
      setState(() {
        _initialized = true;
      });
    } catch(e) {
      // Set `_error` state to true if Firebase initialization fails
      setState(() {
        _error = true;
      });
    }
  }
  @override
  void initState() {
    initializeFlutterFire();
    super.initState();
    _activateListeners();
  }
  void _activateListeners()
  {
    petrolStationsDatabase.onChildAdded.listen((event)
    {
      if(event.snapshot.key==null) {
        return;
      }

      final PetrolStation petrolStation = PetrolStation.fromJson(event.snapshot.value);
      debugPrint(event.snapshot.key);
      debugPrint(petrolStation.address);
      debugPrint(petrolStation.latitude.toString());

      markers.add(Marker(
        markerId: MarkerId(event.snapshot.key==null?"ERROR":event.snapshot.key!),
        position: LatLng(petrolStation.latitude, petrolStation.longitude),
        onTap: () {
          debugPrint("TAP");

          showModalBottomSheet<void>(
            context: _myContext!,
            builder: (context) {
              return Container(
                height: 200,
                color: Colors.amber,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      const Text('Modal BottomSheet'),
                      ElevatedButton(
                        child: const Text('Close BottomSheet'),
                        onPressed: () => Navigator.pop(context),
                      )
                    ],
                  ),
                ),
              );
            }, // builder
          ); //showmodalbottomsheet

        },
          icon:BitmapDescriptor.defaultMarker,
      ));
      //petrolStations.add(petrolStation);
      //debugPrint(petrolStations.length.toString());
    });
  }

  Widget SomethingWentWrong()
  {
    return ErrorWidget("An error has occurred in initialising Firebase");
  }
  Widget Loading()
  {
    return SizedBox.shrink();
  }

  @override
  Widget build(BuildContext context) {
    _myContext = this.context;
    // Show error message if initialization failed
    if(_error) {
      return SomethingWentWrong();
    }
    // Show a loader until FlutterFire is initialized
    if (!_initialized) {
      return Loading();
    }

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Petrol Finder'),
          backgroundColor: Colors.green[700],
        ),
        body: GoogleMap(
          onMapCreated: _onMapCreated,
          initialCameraPosition: CameraPosition(
            target: _center,
            zoom: 11.0,
          ),
          markers: this.markers,
        ),
      ),
    );
  }
}

Answer 1

MediaQuery 在 WidgetsApp 的构建方法中使用。因此，您需要在使用 showBottomSheet 之前声明您的 MaterialApp 小部件。

然后它将能够找到 MediaQuery。在您的情况下，您可以在 MaterialApp 和 Scaffold 之间添加 Builder 小部件以保存具有 MediaQuery 的上下文。

return MaterialApp(
      home: Builder(builder: (context) {
        _myContext = context;
        return Scaffold(
        appBar: AppBar(
          title: const Text('Petrol Finder'),
          backgroundColor: Colors.green[700],
        ),
        body: GoogleMap(
          onMapCreated: _onMapCreated,
          initialCameraPosition: CameraPosition(
            target: _center,
            zoom: 11.0,
          ),
          markers: this.markers,
        ),
      );}),
    );