Flutter: Google Map on iOS not behaving as expected inside Singlechildscrollview

Question

I am using google map plugin in my app inside single child scrollview along with some lists and other widgets. The problem is when I scroll down or up the google map widget sticks to the top or bottom overlaps other widgets as seen below. I tried to go through the existing issues on github and stackoverflow but could not find any solution. If anyone have faced the same problem or have solution to this please help me.

The Issue -> https://gifyu.com/image/YVZx

Here is the code to reproduce the same issue.

import 'dart:async';

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  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 Scaffold(
      appBar: AppBar(
        title: Text('iOS Map'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            ListView.builder(
                itemCount: 20,
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemBuilder: (ctx, index) {
                  return Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Card(
                      child: Text('Test item $index'),
                    ),
                  );
                }),
            SizedBox(
              height: 250,
              child: GoogleMap(
                mapType: MapType.hybrid,
                initialCameraPosition: _kGooglePlex,
                onMapCreated: (GoogleMapController controller) {
                  _controller.complete(controller);
                },
              ),
            ),
            ListView.builder(
                itemCount: 50,
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemBuilder: (ctx, index) {
                  return Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Card(
                      child: Text('Test item $index'),
                    ),
                  );
                }),
          ],
        ),
      ),
    );
  }
}

Yes, There is an issue with new versions of flutter framework. You can check this out https://github.com/flutter/flutter/issues/79887 What i did is I downgraded the flutter version to 1.22.4 and map worked fine so I am running my app on that version for now until it get's fixed in the newer versions. — asif ali, May 21 '21 at 17:10
Yes, if we are not giving the map Size as full screen then we will face the problem. I am also facing same issue, Anybody found solution for this ? — Augustin A, Jul 05 '21 at 15:07
solution is mentioned below you ca test it out. or you can try down-grade flutter version to 1.22.4 which I am using atm. — asif ali, Jul 05 '21 at 17:24
Thank you for ur solution, but downgrading the flutter I will lose all other features, so I have added one more solution in the Answer, — Augustin A, Jul 06 '21 at 03:27

score 1 · Answer 1 · answered May 24 '21 at 03:58

1

This is an issue is related to the Flutter engine, not the Maps issue.

Here is the issue link https://github.com/flutter/flutter/issues/76097

This issue has been fixed in the Latest flutter 2.2 release.

So Please upgrade to the latest flutter.

answered May 24 '21 at 03:58

Jigar Fumakiya

2,039
1
8
21

score 0 · Answer 2 · answered Jul 06 '21 at 03:24

I have modified some of your code snippet, Instead of adding in the ScrollView, add it on ListView then it will resolve your problem,

@overrideWidget build(BuildContext context) {return Scaffold(
appBar: AppBar(
  title: Text('iOS Map'),
),
body: ListView(
    children: [
      ListView.builder(
          itemCount: 20,
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          itemBuilder: (ctx, index) {
            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: Card(
                child: Text('Test item $index'),
              ),
            );
          }),
      SizedBox(
        height: 250,
        child: GoogleMap(
          mapType: MapType.hybrid,
          initialCameraPosition: _kGooglePlex,
          onMapCreated: (GoogleMapController controller) {
            _controller.complete(controller);
          },
        ),
      ),
      ListView.builder(
          itemCount: 50,
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          itemBuilder: (ctx, index) {
            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: Card(
                child: Text('Test item $index'),
              ),
            );
          }),
    ]
),

); }

Flutter: Google Map on iOS not behaving as expected inside Singlechildscrollview

2 Answers2