Flutter googlemaps reloads everytime I change page in tabnavigator - flutter

Question

Hello, I'm trying to use Flutter and the new googlemaps plugin in my application. My problem is that everytime I change page in the tabnav I it will reload googlemaps widget. I tried using AutomaticKeepAliveClientMixin but that didn't help. I will keep trying to figure this out, but help is appreciated or if somebody knows what I'm doing wrong? Thank you!
This is my code:
import 'package:flutter/material.dart';
import 'package:restapoints/pages/pages.dart';
class App extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My Flutter App',
home: Home(),
);
}
}
class Home extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return _HomeState();
}
}
class _HomeState extends State<Home> {
int _currentIndex = 0;
final List<Widget> _children = [
MapPage(),
QrPage(),
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My Flutter App'),
),
body: _children[_currentIndex], // new
bottomNavigationBar: BottomNavigationBar(
onTap: onTabTapped, // new
currentIndex: _currentIndex, // new
items: [
new BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
new BottomNavigationBarItem(
icon: Icon(Icons.mail),
title: Text('Messages'),
),
new BottomNavigationBarItem(
icon: Icon(Icons.person), title: Text('Profile'))
],
),
);
}
void onTabTapped(int index) {
setState(() {
_currentIndex = index;
});
}
}
MapPage:
class MapPage extends StatefulWidget {
#override
_MapPageState createState() => _MapPageState();
}
class _MapPageState extends State<MapPage>
with AutomaticKeepAliveClientMixin<MapPage> {
#override
Widget build(BuildContext context) {
return Container(
///Getting size of the screen from [MediaQuery] inherited widget.
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Stack(
children: <Widget>[
GoogleMap(
onMapCreated: _onMapCreated,
options: GoogleMapOptions(
compassEnabled: true,
mapType: MapType.normal,
trackCameraPosition: true,
),
),
///If not enabled don't show ListView of places.
toggleListView
? Positioned(
top: MediaQuery.of(context).size.height / 2,
left: 10,
child: Container(
height: MediaQuery.of(context).size.height / 4,
width: MediaQuery.of(context).size.width,
child: ListView(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.all(5.0),
children: _places.map((place) {
return _placeCard(place);
}).toList(),
)),
)
: Container()
],
),
);
#override
bool get wantKeepAlive => true;
}

Answer 1

Instead of making the page a StatefulWidget like MapPage, I added the Widget inside an IndexedStack to prevent rebuild of the page. Though the downside of this approach is that the page might take time to build if there's a lot of pages added on Stack.