flutter-mapbox-gl App Drawer 在 MapBox 后面打开 :(答案

【问题标题】：flutter-mapbox-gl App Drawer opens behind the MapBox :(flutter-mapbox-gl App Drawer 在 MapBox 后面打开 :(
【发布时间】：2022-08-16 06:11:09
【问题描述】：

我在 Flutter App 的一条路线中有 MapBox。但由于某种原因，它似乎是最顶层的控件——因为它覆盖了抽屉。

如何让 MapBox 位于主应用程序抽屉后面？

相关 Github 问题here

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.0.1, on Microsoft Windows [Version 10.0.19044.1706], locale en-NZ)
[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.2.0)
[√] Android Studio (version 2021.2)
[√] VS Code (version 1.67.2)
[√] Connected device (4 available)
[√] HTTP Host Availability

environment: 
  sdk: \'>=2.17.0 <3.0.0\'

dependencies:
  collection:
  cupertino_icons: ^1.0.2
  flutter:
    sdk: flutter
  flutter_easyloading: ^3.0.3
  get: ^4.6.3
  http:
  logger: ^1.1.0
  mapbox_gl: ^0.16.0
  oauth2_client: ^2.4.0
  syncfusion_flutter_calendar: ^20.1.57

dev_dependencies: 
  flutter_lints: ^2.0.0
  flutter_test: 
    sdk: flutter

flutter: 
  uses-material-design: true

map.dart

import \'package:flutter/material.dart\';
import \'package:get/get.dart\';
import \'package:mapbox_gl/mapbox_gl.dart\';

import \'../services/item.dart\';

class MapControl extends StatefulWidget {
  const MapControl({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => MapControlState();
}

class MapControlState extends State<MapControl> {
  final itemService = Get.find<ItemService>();

  @override
  void initState() {
    super.initState();
  }

  MapboxMapController? mapController;

  _onMapCreated(MapboxMapController controller) {
    mapController = controller;
  }

  _onStyleLoadedCallback() {
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: const Text(\"Style loaded :)\"),
      backgroundColor: Theme.of(context).primaryColor,
      duration: const Duration(seconds: 1),
    ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: MapboxMap(
          styleString: MapboxStyles.LIGHT,
          accessToken: \'xxxxxxxxxxxxxxxxx\',
          onMapCreated: _onMapCreated,
          initialCameraPosition: const CameraPosition(target: LatLng(0.0, 0.0)),
          onStyleLoadedCallback: _onStyleLoadedCallback,
        ));
  }
}

view_view.dart

import \'package:flutter/material.dart\';
import \'package:get/get.dart\';

import \'../../../common/calendar.dart\';
import \'../../../common/list.dart\';
import \'../../../common/map.dart\';
import \'../../../models/items.dart\';
import \'../controllers/view_controller.dart\';

class ViewView extends GetView<ViewController> {
  const ViewView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Obx(
          () => getView(controller.itemService.currentActiveViewItem.value)),
    );
  }

  Widget getView(Item? viewItem) {
    switch (viewItem?.type?.name) {
      case \"CalendarView\":
        return const CalendarControl();
      case \"ListView\":
        return const ListControl();
      case \"MapView\":
        return const MapControl();
      default:
        return Container();
    }
  }
}

home_view.dart

import \'package:flutter/material.dart\';
import \'package:get/get.dart\';
import \'package:realnet_app/app/common/nav_drawer.dart\';

import \'../../../common/realnet_icon.dart\';
import \'../controllers/home_controller.dart\';

class HomeView extends GetView<HomeController> {
  @override
  Widget build(BuildContext context) {
    return Obx(() => Scaffold(
          appBar: AppBar(
            title: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: [
                RealNetIcon(controller.itemService.currentItem.value),
                Text(
                    controller.itemService.currentItem.value?.name ?? \"RealNet\")
              ],
            ),
            centerTitle: true,
          ),
          body: Navigator(
            key: Get.nestedKey(1),
            initialRoute: \'/empty\',
            onGenerateRoute: controller.onGenerateRoute,
          ),
          drawer: NavDrawer(),
          bottomNavigationBar:
              controller.itemService.currentViewItems.value.length >= 2
                  ? BottomNavigationBar(
                      type: BottomNavigationBarType.fixed,
                      currentIndex:
                          controller.itemService.currentActiveViewIndex.value,
                      onTap: (value) {
                        controller.itemService.updateActiveViewIndex(value);
                      },
                      items: [
                        ...controller.itemService.currentViewItems.value
                            .map((viewItem) => BottomNavigationBarItem(
                                  label: viewItem.name,
                                  icon: RealNetIcon(viewItem),
                                )),
                      ],
                    )
                  : null,
        ));
  }
}

你找到答案了吗？实际上我们面临着同样的问题。抽屉实际上在地图上方，但它部分不可见。 stackoverflow.com/questions/73300884/…
是的，似乎颤振 3 打破了它，我们必须等待颤振 3.3 才能在 Android 上修复它:( 请参阅 github.com/flutter-mapbox-gl/maps/issues/1041

标签： flutter mapbox flutter-mapbox-gl

【解决方案1】：

解决了！！

尝试移动到最新版本的颤振，做：

颤振通道主
颤振升级

【讨论】：