flutter google map animation flickering problem

Question

I have google map in my flutter mobile application using google_maps_fultter plugin combine with a simple custom bottom navigation bar using built in bottomNavigationBar prop in Scaffold. When I try to animate it (or even just show hide the bottom navigation bar) I got this awful flickering in my app as you can see here:

Any ideas why this happening and how can i solve it ?

Code:

Map Widget:

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class Explore extends HookWidget {
  Explore({Key key}) : super(key: key);

  final Completer<GoogleMapController> _controller = Completer();

  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  );

  static final CameraPosition _kLake = CameraPosition(
      bearing: 192.8334901395799,
      target: LatLng(37.43296265331129, -122.08832357078792),
      tilt: 59.440717697143555,
      zoom: 19.151926040649414);

  Future<void> _goToTheLake() async {
    final GoogleMapController controller = await _controller.future;
    controller.animateCamera(CameraUpdate.newCameraPosition(_kLake));
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition: _kGooglePlex,
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _goToTheLake,
        label: Text('To the lake!'),
        icon: Icon(Icons.directions_boat),
      ),
    );
  }
}

Bottom Navigation Bar:

bottomNavigationBar: AnimatedContainer(
          duration: Duration(milliseconds: 500),
          height: hide.value ? 0 : 56.0,
          child: Wrap(
            children: [
              BottomNavigationBar(
                key: key,
                backgroundColor: Colors.transparent,
                elevation: 0,
                items: const <BottomNavigationBarItem>[
                  BottomNavigationBarItem(
                    icon: Icon(Icons.explore),
                    label: 'Explore',
                  ),
                  BottomNavigationBarItem(
                    icon: Icon(Icons.group),
                    label: 'Hives',
                  ),
                  BottomNavigationBarItem(
                    icon: Icon(Icons.person),
                    label: 'Me',
                  ),
                ],
                currentIndex: tabIndex.value,
                selectedItemColor: Colors.amber[800],
                onTap: (int index) {
                  tabIndex.value = index;
                },
              ),
            ],
          ),

Thank you!