CODEWITHSUNDEEP
iosfluttergoogle-mapssinglechildscrollview
asif ali
asif ali

Reputation: 108

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

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'),
                    ),
                  );
                }),
          ],
        ),
      ),
    );
  }
}

Upvotes: 0

Views: 1245

Answers (2)

Augustin A
Augustin A

Reputation: 127

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'),
              ),
            );
          }),
    ]
),

); }

Upvotes: 0

Jigar Fumakiya
Jigar Fumakiya

Reputation: 2319

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.

Upvotes: 1

Related Questions