How to take screenshot of Google Map in flutter

Question

I am using screenshot plugin for taking screenshot in flutter, but problem is when i am taking screenshot, is showing blank white screen and after that i not getting anything.This happen every time.I am performing this task using below pseudo.

void main() async {
runApp(MyApp());
}

class MyApp extends StatefulWidget {

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

 }

 class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
    Completer<GoogleMapController> _controller = Completer();
    LocationData locationdata;
    ScreenshotController screenshotController = ScreenshotController();
    var location;
    var lat = 0.0;
    var lng = 0.0;
    CameraController controller;
    final Set<Marker> _markers = {};
    StreamSubscription<LocationData> locationSubcription;
    LatLng _center;
    File _imageFile;
    static GlobalKey screen = new GlobalKey();
    String imagePath;


      @override
   void initState() {
// TODO: implement initState
super.initState();
// Fetch the available cameras before initializing the app.
WidgetsBinding.instance.addObserver(this);

//  _cameraTogglesRowWidget();

onNewCameraSelected(null);

location = new Location();

_getLocation();

locationSubcription = location.onLocationChanged().listen((location) {
  setState(() {
    locationdata = location;
  });
});
}


 @override
 void dispose() {
WidgetsBinding.instance.removeObserver(this);
super.dispose();
}

 @override
 Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
  appBar: AppBar(
    title: Text('Maps Sample App'),
    backgroundColor: Colors.green[700],
  ),
  body: Container(
    margin: EdgeInsets.all(5),
    child: Column(children: <Widget>[
        Screenshot(
        controller: screenshotController,
      //          RepaintBoundary(
   //            key: screen,
        child:
        Row(
          children: <Widget>[
            Expanded(
                child: Container(
              width: 200,
              height: 200,
              child: GoogleMap(
                  onMapCreated: _onMapCreated,
                  initialCameraPosition: CameraPosition(
                    target: _center,
                    zoom: 15.0,
                  ),
                  markers: _markers),decoration: BoxDecoration(
                  color: Colors.black,
                  border: Border.all(
                    color: controller != null &&
                        controller.value.isRecordingVideo
                        ? Colors.redAccent
                        : Colors.grey,
                    width: 3.0,
                  ),
                )
            ),),
            Expanded(
              child: Container(
                width: 200,
                height: 200,
                child: Padding(
                  padding: const EdgeInsets.all(1.0),
                  child: Center(
                    child: _cameraPreviewWidget(),
                  ),
                ),
                decoration: BoxDecoration(
                  color: Colors.black,
                  border: Border.all(
                    color: controller != null &&
                            controller.value.isRecordingVideo
                        ? Colors.redAccent
                        : Colors.grey,
                    width: 3.0,
                  ),
                ),
              ),
            )
          ],
        )),
     // ),
      _imageFile != null ? Image.file(_imageFile,height: 200,width: 200,) 
   : Container(),
  //          Screenshot(
   //            controller: screenshotController,
  //            child:
 //            imagePath != null ? Image.asset(imagePath,height: 
             100,width: 100,) : Container(),
    //        ),
      RaisedButton(
        onPressed: () {
          screenshotController.capture().then((File image) {
            //Capture Done
            setState(() {
              _imageFile = image;
            });
          }).catchError((onError) {
            print(onError);
          });

        //  onTakePictureButtonPressed();
      //   ScreenShot();
        },
        child: Text('Capture'),
        )
      ]),
      ),
        ));
        }

   ScreenShot() async{
  RenderRepaintBoundary boundary = 
  screen.currentContext.findRenderObject();
  ui.Image image = await boundary.toImage();
   ByteData byteData = await image.toByteData(format: 
  ui.ImageByteFormat.png);

  var filePath = await ImagePickerSaver.saveFile(
    fileData:byteData.buffer.asUint8List() );
  print(filePath);

  }

  void _onMapCreated(GoogleMapController controller) {
   _controller.complete(controller);
 }

      void _getLocation() async {
  var currentLocation;
   try {
    currentLocation = await location.getLocation();
   } catch (e) {
    currentLocation = null;
  }
  setState(() {
  locationdata = currentLocation;
  lat = locationdata.latitude;
  lng = locationdata.longitude;

  _center = LatLng(lat, lng);
  _markers.add(Marker(
    // This marker id can be anything that uniquely identifies each 
   marker.
    markerId: MarkerId(_center.toString()),
    position: _center,
    infoWindow: InfoWindow(
      title: 'Really cool place',
      snippet: '5 Star Rating',
    ),
      icon: BitmapDescriptor.defaultMarker,
  ));
   });
   }

   @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
  if (state == AppLifecycleState.inactive) {
  controller?.dispose();
  } else if (state == AppLifecycleState.resumed) {
  if (controller != null) {
    onNewCameraSelected(controller.description);
    }
  }
 }

   Widget _captureControlRowWidget() {
   return Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[
    IconButton(
      icon: const Icon(Icons.camera_alt),
      color: Colors.blue,
      onPressed: controller != null &&
          controller.value.isInitialized
          ? onTakePictureButtonPressed
          : null,

     ),
    ],
   );
  }

 String timestamp() => DateTime.now().millisecondsSinceEpoch.toString();

Future<String> takePicture() async {
if (!controller.value.isInitialized) {
 // showInSnackBar('Error: select a camera first.');
  return null;
}
final Directory extDir = await getApplicationDocumentsDirectory();
final String dirPath = '${extDir.path}/Pictures/flutter_test';
await Directory(dirPath).create(recursive: true);
final String filePath = '$dirPath/${timestamp()}.jpg';

if (controller.value.isTakingPicture) {
  // A capture is already pending, do nothing.
  return null;
}

try {
  await controller.takePicture(filePath);
} on CameraException catch (e) {
//  _showCameraException(e);
  return null;
}
return filePath;
 }

void onTakePictureButtonPressed() {
  takePicture().then((String filePath) {
  if (mounted) {
    setState(() {
      imagePath = filePath;

    });
   // if (filePath != null)
      //showInSnackBar('Picture saved to $filePath');
  }
  });
}

 void onNewCameraSelected(CameraDescription cameraDescription) async {
  if (controller != null) {
  await controller.dispose();
   }
  controller = CameraController(
  CameraDescription(
      name: "1",
      lensDirection: CameraLensDirection.front,
      sensorOrientation: 270),
  ResolutionPreset.high,
  enableAudio: true,
   );

  // If the controller is updated then update the UI.
  controller.addListener(() {
  if (mounted) setState(() {});
  if (controller.value.hasError) {
    //  showInSnackBar('Camera error 
  ${controller.value.errorDescription}');
    print(controller.value.errorDescription);
   }
   });

   try {
   await controller.initialize();
  } on CameraException catch (e) {
  print(e);
  //  _showCameraException(e);
  }

  if (mounted) {
  setState(() {});
  }
  }

  Widget _cameraTogglesRowWidget() {
   final List<Widget> toggles = <Widget>[];

  if (cameras.isEmpty) {
    return const Text('No camera found');
  } else {
    for (CameraDescription cameraDescription in cameras) {
     toggles.add(
      SizedBox(
        width: 90.0,
        child: RadioListTile<CameraDescription>(
          title: Icon(getCameraLensIcon(cameraDescription.lensDirection)),
          groupValue: controller?.description,
          value: cameraDescription,
          onChanged: controller != null ? null : onNewCameraSelected,
        ),
      ),
       );
        }
      }

          return Row(children: toggles);
        }

       IconData getCameraLensIcon(CameraLensDirection direction) {
     switch (direction) {
      case CameraLensDirection.back:
       return Icons.camera_rear;
         case CameraLensDirection.front:
     return Icons.camera_front;
        case CameraLensDirection.external:
          return Icons.camera;
         }
        throw ArgumentError('Unknown lens direction');
          }

             Widget _cameraPreviewWidget() {
       if (controller == null || !controller.value.isInitialized) {
       return const Text(
      'Tap a camera',
      style: TextStyle(
        color: Colors.white,
      fontSize: 24.0,
      fontWeight: FontWeight.w900,
      ),
      );
      } else {
   return AspectRatio(
    aspectRatio: controller.value.aspectRatio,
     child: CameraPreview(controller),
    );
    }
   }
        }

''''''

That is code Output: https://i.stack.imgur.com/PMLKu.jpg

But I need that Output : https://i.stack.imgur.com/rAAs8.jpg

Answer 1

I sent a pull request to Flutter that implements this. Until they merge it, you could use my fork of the plugin: https://github.com/duzenko/plugins/tree/maps-snapshot