[BUG] Cannot Pan Vertically Inside `ListView`

[alejandrogiubel]

Describe The Bug Map inside ListView example not works as expected in android device.

Expected Behavior Map scroll does not scroll the list view

Screenshots & Recordings

https://user-images.githubusercontent.com/36578847/179428019-3f8f6ff5-68cf-4c16-bf5a-77ce40383954.mp4

---

Doctors Report

[✓] Flutter (Channel stable, 3.0.3, on macOS 12.4 21F79 darwin-arm, locale
    es-419)
    • Flutter version 3.0.3 at /Users/alejo/Documents/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 676cefaaff (4 weeks ago), 2022-06-22 11:34:49 -0700
    • Engine revision ffe7b86a1e
    • Dart version 2.17.5
    • DevTools version 2.12.2

[!] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/alejo/Library/Android/sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for
      more details.

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

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

[✓] Android Studio (version 2021.2)
    • 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.12+0-b1504.28-7817840)

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

[✓] Connected device (3 available)
    • SM A305G (mobile) • R58M84Q30VV • android-arm64  • Android 11 (API 30)
    • macOS (desktop)   • macos       • darwin-arm64   • macOS 12.4 21F79
      darwin-arm
    • Chrome (web)      • chrome      • web-javascript • Google Chrome
      103.0.5060.114

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

To Reproduce Run the example app

---

Severity This will help us to label the issue quicker and decide what needs attention first. Only choose fatal if the entire app crashes, otherwise choose non-fatal.

• [x] Non-Fatal
• [ ] Fatal / App Crashes

Frequency/Rarity This will help us to label the issue quicker and decide what needs attention first.

• [ ] Once
• [ ] Uncommon
• [ ] Common
• [x] Always

Applicable Platforms Only select those that you've tested on - one or more. If possible, test on a variety of platforms.

• [x] Android
• [ ] iOS
• [ ] Web
• [ ] Windows
• [ ] Others (beta platforms)

[ibrierley]

what version of FlutterMap are you using, and is the example modified at all with any other code ?

[erofcon]

I confirm. I have the same problem. Inside SingleChildScrollView doesn't work either

[ibrierley]

What version of FlutterMap are you using, and is it the default listview example unmodified ?

[erofcon]

I am using the default ListView/SingleChildScrollView. My problem is described here https://stackoverflow.com/questions/61744359/google-maps-inside-a-form-in-singlechildscrollview . Is there any solution to this problem for this library? Flutter 3.0.2.

[ibrierley]

You are using GoogleMap not FlutterMap.

[erofcon]

I am using flutter_map. I gave this as an example that is also in flutter_map for me.

[ibrierley]

What version of flutter_map are you using, and are you using the listview example in the examples folder to test ?

[JaffaKetchup]

Not sure if relevant, but wasn't there that options property about scrolling and patent widget or something like that

[ibrierley]

allowPanningOnScrollingParent: false, in MapOptions maybe ? It may be relevant, hard to tell without more info

[erofcon]

The code I use is the same as in the examples.

Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ListView(
        scrollDirection: Axis.vertical,
        children: [
          SizedBox(
            height: 500,
            child: FlutterMap(
              options: MapOptions(
                allowPanningOnScrollingParent: false,
                center: LatLng(51.5, -0.09),
                zoom: 5.0,
                plugins: [
                  // ZoomButtonsPlugin(),
                ],
              ),
              children: <Widget>[
                TileLayerWidget(
                  options: TileLayerOptions(
                    wmsOptions: WMSTileLayerOptions(
                      baseUrl: 'https://{s}.s2maps-tiles.eu/wms/?',
                      layers: ['s2cloudless-2018_3857'],
                    ),
                    subdomains: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'],
                    userAgentPackageName: 'dev.fleaflet.flutter_map.example',
                  ),
                ),
              ],
            ),
          ),
          const Card(
            child: ListTile(
                title: Text(
                    'Scrolling inside the map does not scroll the ListView')),
          ),
          const SizedBox(height: 500),
          const Card(child: ListTile(title: Text('look at that scrolling'))),
          const Card(child: ListTile(title: Text('look at that scrolling'))),
          const Card(child: ListTile(title: Text('look at that scrolling'))),
          const Card(child: ListTile(title: Text('look at that scrolling'))),
        ],
      ),
    );

https://www.youtube.com/watch?v=YkZliaZm6Zk

flutter_map: ^2.0.0 Flutter 3.0.2

[ibrierley]

What about if you put flutter_map inside an AbsorbPointer....eg

AbsorbPointer( child: FlutterMap( ... ) )

[alejandrogiubel]

I am using 2.0.0 version. The problem occurs in Android Physics and emulator device, in iOS simulator works as expected. I don't change any things in example code. Just clone and run.

[erofcon]

What about if you put flutter_map inside an AbsorbPointer....eg

AbsorbPointer( child: FlutterMap( ... ) )

Does not work.

[ibrierley]

How about an IgnorePointer ?

[alejandrogiubel]

I think AbsorbPointer and IgnorePointer has no sense, because some widget lost the scroll property (and tap property). The objective is map with scroll (vertical and horizontal) and remain the ListView scroll but only out of map tap. The question is, why works in iOS simulator and does not in Android Physic and emulator device?

[erofcon]

How about an IgnorePointer ?

Doesn't work either. With AbsorPointer and IgnorePointer map does not respond to touches.

[erofcon]

I haven't tested on IOS, but it doesn't work on the web either.

[ibrierley]

I think AbsorbPointer and IgnorePointer has no sense, because some widget lost the scroll property (and tap property). The objective is map with scroll (vertical and horizontal) and remain the ListView scroll but only out of map tap. The question is, why works in iOS simulator and does not in Android Physic device?

Yes, I suspect I was misunderstanding the initial problem in part.

[alejandrogiubel]

Just updating, doesn't work on Android Emulator either.

[JaffaKetchup]

This functionality seems to work for me, considering I've just been testing #1293, which directly deals with maps in a list.

See if this code works for you:

import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart' show LatLng;

void main() {
  runApp(const MaterialApp(
    title: 'Flutter Demo',
    home: MyHomePage(),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Map in a ListView'),
      ),
      body: ListView(children: [
        SizedBox(
          height: 100.0,
          child: FlutterMap(
            options: MapOptions(
              center: LatLng(50, 30),
              zoom: 13,
              allowPanningOnScrollingParent: false,
            ),
            layers: [
              TileLayerOptions(
                urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
              ),
            ],
          ),
        ),
        for (int i = 1; i < 30; i++)
          Padding(
            padding: const EdgeInsets.all(20.0),
            child: Center(child: Text('Line $i', style: const TextStyle(fontSize: 20))),
          ),
      ]),
    );
  }
}

[alejandrogiubel]

Hi @JaffaKetchup. Thank for your response but doesn't work either. Horizontal scroll works fine but vertical scroll keep scrolling the ListView not the map. Also this example throw an error when I scroll to Botton and try to pan the map (Bad state: Cannot add new events after calling close).

[JaffaKetchup]

Yeah, that error will be fixed in v2.1.0, which is what that PR was about.

I do see what you mean though. If you pan horizontally, then vertically, it works fine, but if you try to just do vertical, it doesn't seem to work.

[JaffaKetchup]

Is there an older version in which this functionality seemed to work?

[alejandrogiubel]

@JaffaKetchup sorry is my first time with flutter map. This is a video working well on iOS simulator, flutter_map: 2.0.0. flutter: 3.0.5

https://user-images.githubusercontent.com/36578847/180075879-58c3bc4b-3937-4513-834c-60dc45f68367.mov

[JaffaKetchup]

No problem, this is unusual behaviour, so please don't be put off. There should not be platform specific behaviour like this, so I'm wondering if it's an issue elsewhere?

Looking through our gesture detection code, however, it looks like it could be improved, as there's essentially 3 nested detectors which probably aren't playing nice together. However, in this case, all platforms should behave the same way, so I don't think this is the issue.

Thanks for the report, we will need to look further into this :)

[JaffaKetchup]

May I ask what your use-case for using a map inside a list is? We usually recommend you don't do this because it restricts the size of the map, which usually needs to be quite big to display much useful information. Maybe we can find a temporary alternative design?

[alejandrogiubel]

Thanks I understand. We use a Scroll (Column inside a SingleChildScrollView) where we show several elements, one of them is the map (the user can scroll vertically at will to work on any of the elements). For now we will have to modify the design to avoid this issue (or maybe use some workaround with the scroll physics). Thank you for your attention. I'll be waiting for any solution. 👍🏼

[alejandrogiubel]

Any update around that?

[JaffaKetchup]

Unfortunately not. I haven't had much of a look into this, as I'm not very experienced in this part.

[alejandrogiubel]

Adding this to RawGestureDetector in flutter_map_state.dart the issue is solved but, we lost the double tap (double tap to zoom) and tap behavior. May be some workaround with this.

EagerGestureRecognizer:
  GestureRecognizerFactoryWithHandlers<EagerGestureRecognizer>(
        () => EagerGestureRecognizer(),
        (EagerGestureRecognizer instance) {
      scaleGestureTeam.captain = instance;
      instance.team ??= scaleGestureTeam;
    },),