flutteruiviewflutter-layoutgoogle-maps-fluttersinglechildscrollview

In Scrollable Widget Google Map Widget Shifting Its Camera At Screen Edges (In case of fragment view)


In scrollable widget, when google map come to screen edges, its camera position slightly shifting. And it produces lagging Is there an any way to prevent this behavior. Its like google_map trying to reposition its camera. I think this is like an undesired outcome. How could I keep stable the map while it is at screen edges


Sample code and flutter doctor outputs are below the example gif.

Problem example gif

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

class DenemePage extends StatelessWidget {
  const DenemePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Padding(
        padding: const EdgeInsets.only(top: 200, bottom: 1500),
        child: Container(
          width: MediaQuery.of(context).size.width,
          height: 400,
          child: Stack(
            alignment: Alignment.center,
            children: [
              GoogleMap(
                initialCameraPosition:
                    const CameraPosition(target: LatLng(40, 29), zoom: 10),
              ),
              Icon(Icons.radar_outlined)
            ],
          ),
        ),
      ),
    );
  }
}

Flutter Doctor
[✓] Flutter (Channel stable, 2.10.3, on macOS 12.4 21F79 darwin-x64, locale tr-TR)
    • Flutter version 2.10.3 at /Volumes/HARDDISK/SDKs/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7e9793dee1 (5 months ago), 2022-03-02 11:23:12 -0600
    • Engine revision bd539267b4
    • Dart version 2.16.1
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Volumes/HARDDISK/SDKs/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)

[✓] VS Code (version 1.69.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.44.0

[✓] Connected device (2 available)
    • iPhone 13 Pro (mobile) • BE0A3070-5A72-46F4-A649-6C7F17B9A731 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-4 (simulator)
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 103.0.5060.114

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

Solution

  • I have created a solution.

    1. Download the google_maps_flutter
    2. Edit the code in google_maps_flutter-2.1.8/iOS/Classes/GoogleMapController.m from
        _mapView.delegate = weakSelf;
        _registrar = registrar;
    
    

    to

        _mapView.delegate = weakSelf;
        _mapView.paddingAdjustmentBehavior = kGMSMapViewPaddingAdjustmentBehaviorNever;
        _registrar = registrar;
    
    
    1. Put this modified google_maps_flutter-2.1.8 folder into somewhere. Let say parentFolder/google_maps_flutter-2.1.8.

    2. In pubspec.yaml file which flutter project you want to use this modified package.

    google_maps_flutter:
        path: parentFolder/google_maps_flutter-2.1.8 
    

    Also I have opened a issue about that on GitHub. More detailed info is at there.