Android map renders above all other widgets in Flutter 3.0.1

[cohenadair]

The following demo app works as expected in Flutter 2.10.5, but in 3.0.1, the map renders in front of all other widgets. The behaviour is similar to that described in #983, which was fixed by #992.

Everything works fine on iOS. I tested on an iOS 15.4 simulator.

Environment:

• Android 12 emulator
• Flutter 3.0.1
• flutter-mapbox-gl 0.16.0

Expected Result:

• User can freely navigate between bottom tabs.

Actual Result:

• The map shows for all tabs.

Notes:

• I found that removing the IndexedStack allows you to navigate between tabs; however, when placed within another Stack (for example, to show a widget on top of the map), the map always renders in front of all other widgets.
• You can downgrade Flutter with flutter downgrade 2.10.5 if you are already on Flutter 3.0.1.

Demo App:
Add to pubspec.yaml:

mapbox_gl: ^0.16.0

Set Android minSdkVersion in app/build.gradle:

minSdkVersion 20

Run the following app:

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

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

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: IndexedStack(
        index: _selectedIndex,
        children: [
          const Text(
            'Index 0: Home',
            style: optionStyle,
          ),
          const Text(
            'Index 1: Business',
            style: optionStyle,
          ),
          MapboxMap(
            initialCameraPosition: const CameraPosition(target: LatLng(0, 0)),
            accessToken: "",
          )
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.location_on),
            label: 'Map',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

[karris7]

I am having the same issue, downgrading to flutter 2.10.5 solved it.
I found this on the flutter GitHub
Platform view issue

[junaidlodhi22]

Thank you for your excellent package. We really appreciate your work.
yes, the same issue is happening with us. we are using
Environment:

Android 10 physical device
Flutter 3.0.1
flutter-mapbox-gl 0.16.0

The issue gets resolved by downgrading to flutter 2.10
But we can not downgrade as we are using the same version on every system we have. Kindly, look into this as soon as possible.

[felix-mittermeier]

Pretty sure it's a duplicate of #1041

[penhorwood]

This issue is waiting on flutter/engine#33599 on the flutter engine. Not sure what is keeping this pull request from being merged. Leave at comment at the link to show the number of people waiting on this.