GoogleMap in PageView

Question

I have a googlemap located on containers in a pageview... When u swipe between the pages that contain these googlemap widgets, the pagesnapping breaks... so inside my code when I do

class Homepage extends StatelessWidget {
  @override build(BuildContext context){
    return PageView(
      children: <Widget>[
        Container(color:Colors.red),
        Container(color:Colors.green),
        Container(color:Colors.blue),
        Container(color:Colors.yellow),
        Container(color:Colors.pink),
        // Container(child:GoogleMap(initialCameraPosition: CameraPosition(target:LatLng(0, 0)),)),
        // Container(child:GoogleMap(initialCameraPosition: CameraPosition(target:LatLng(0, 0)),)),
        // Container(child:GoogleMap(initialCameraPosition: CameraPosition(target:LatLng(0, 0)),)),
        // Container(child:GoogleMap(initialCameraPosition: CameraPosition(target:LatLng(0, 0)),))
      ],
    );
  }

This, it works fine and all the pages snap perfectly.. However when I uncomment the GoogleMap widgets like so:

class Homepage extends StatelessWidget {
  @override build(BuildContext context){
    return PageView(
      children: <Widget>[
        // Container(color:Colors.red),
        // Container(color:Colors.green),
        // Container(color:Colors.blue),
        // Container(color:Colors.yellow),
        // Container(color:Colors.pink),
        Container(child:GoogleMap(initialCameraPosition: CameraPosition(target:LatLng(0, 0)),)),
        Container(child:GoogleMap(initialCameraPosition: CameraPosition(target:LatLng(0, 0)),)),
        Container(child:GoogleMap(initialCameraPosition: CameraPosition(target:LatLng(0, 0)),)),
        Container(child:GoogleMap(initialCameraPosition: CameraPosition(target:LatLng(0, 0)),))
      ],
    );
  }
}

The PageView works for a while but breaks (on IOS) and this error is (sometimes) shown in the console:

[VERBOSE-2:ui_dart_state.cc(148)] Unhandled Exception: 'package:flutter/src/gestures/converter.dart': Failed assertion: line 155 pos 18: '!state.down': is not true.
#0      _AssertionError._doThrowNew (dart:core/runtime/liberrors_patch.dart:40:39)
#1      _AssertionError._throwNew (dart:core/runtime/liberrors_patch.dart:36:5)
#2      PointerEventConverter.expand (package:flutter/src/gestures/converter.dart:155:18)
#3      _SyncIterator.moveNext (dart:core/runtime/libcore_patch.dart:152:12)
#4      ListQueue.addAll (dart:collection/queue.dart:715:25)
#5      _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:83:27)
#6      _rootRunUnary (dart:async/zone.dart:1136:13)
#7      _CustomZone.runUnary (dart:async/zone.dart:1029:19)
#8      _CustomZone.runUnaryGuarded (dart:async/zone.dart:931:7)
#9      _invoke1 (dart:ui/hooks.dart:223:10)
#10     _dispatchPointerDataPacket (dart:ui/hooks.dart:144:5

Anyone seen and fixed this?

Thanks for your attention..

John.

Answer 1

I had a similar issue working with google map in pageview but after searching online I got a solution that finally worked

All I did was put the google map in a stateful widget, used the with AutomaticKeepAliveClientMixin and @override bool get wantKeepAlive => true; and called in the required widget This is the stateful widget containing the google map

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

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

class _GoogleMapWidgetState extends State<GoogleMapWidget> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    return Container(
        child:GoogleMap(initialCameraPosition: CameraPosition(target:LatLng(0, 0)),)
    );
  }
}

Then you can call it from your Homepage like so

class Homepage extends StatelessWidget {
  @override 
  build(BuildContext context){
      return PageView(
          children: <Widget>[
              GoogleMapWidget(),
              GoogleMapWidget(),

          ],
      );
   }
}

I hope this is the answer you're looking for