Flutter Google Maps messes up the named navigation

I'm basically a complete beginner with flutter. I was just trying to add a Google Maps page in my App but as soon as I pasted the example code from flutter.dev it messed up my navigation. Every time when I click the icon in my buttomnavigationbar the selected icon/route is basically random (it even prints out the wrong path so the 'error' isn't in the switch case or navigation but rather settings.name is wrong). This just happens when I add Google Maps to the MapsPage() so I think it has something to do with the async of Google Maps maybe?

Here's my main.dart:

import 'package:flutter/material.dart';

import './map_page.dart';
import './account_page.dart';
import './sports_page.dart';

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

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

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

class _MyAppState extends State<MyApp> {
  final _navigatorKey = GlobalKey<NavigatorState>();
  int _index = 0;
  static const List<String> _pages = <String>[
    '/',
    '/account',
    '/sports',
  ];

  void _botNavBarChange(int _index1) {
    setState(() {
      if (_index1 != _index) {
        _navigatorKey.currentState!.pushNamed(_pages.elementAt(_index));
      }
      _index = _index1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        accentColor: Colors.orangeAccent,
      ),
      home: Builder(
        builder: (context) => Scaffold(
          body: Navigator(
            key: _navigatorKey,
            initialRoute: '/',
            onGenerateRoute: (RouteSettings settings) {
              WidgetBuilder builder;
              // Manage your route names here
              switch (settings.name) {
                case '/':
                  print("map");
                  builder = (BuildContext context) => MapPage();
                  break;
                case '/account':
                  builder = (BuildContext context) => MyHomePage();
                  print("account");
                  break;
                case '/sports':
                  print("sports");
                  builder = (BuildContext context) => SportsPage();
                  break;
                default:
                  throw Exception('Invalid route: ${settings.name}');
              }
              return MaterialPageRoute(
                builder: builder,
                settings: settings,
              );
            },
          ),
         bottomNavigationBar: BottomNavigationBar(
            type: BottomNavigationBarType.shifting,
            selectedFontSize: 20,
            selectedIconTheme:
                IconThemeData(color: Theme.of(context).accentColor),
            selectedItemColor: Theme.of(context).accentColor,
            unselectedIconTheme:
                IconThemeData(color: Theme.of(context).primaryColorLight),
            currentIndex: _index,
            onTap: _botNavBarChange,
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(Icons.map),
                label: 'Map',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.person),
                label: 'Account',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.sports_baseball_rounded),
                label: 'Sports',
              ),
            ],
          ),
        ),
      ),
    );
  }
}

And this is map_page.dart:

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

import 'package:google_maps_flutter/google_maps_flutter.dart';

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

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

class _MapPageState extends State<MapPage> {
  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);

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

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

Any ideas how to fix this?



Read more here: https://stackoverflow.com/questions/67840988/flutter-google-maps-messes-up-the-named-navigation

Content Attribution

This content was originally published by Janik at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: