[BUG] Cannot Pan Vertically Inside `ListView` #1308

alejandrogiubel · 2022-07-17T22:54:53Z

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

WhatsApp.Video.2022-07-17.at.6.49.40.PM.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.

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
Always

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

ibrierley · 2022-07-18T05:22:12Z

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

erofcon · 2022-07-18T11:41:35Z

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

ibrierley · 2022-07-18T12:06:39Z

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

erofcon · 2022-07-18T12:21:32Z

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 · 2022-07-18T12:24:23Z

You are using GoogleMap not FlutterMap.

erofcon · 2022-07-18T12:30:53Z

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

ibrierley · 2022-07-18T12:34:42Z

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

JaffaKetchup · 2022-07-18T12:51:52Z

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

ibrierley · 2022-07-18T12:56:16Z

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

erofcon · 2022-07-18T13:21:08Z

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 · 2022-07-18T13:40:31Z

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

AbsorbPointer( child: FlutterMap( ... ) )

alejandrogiubel · 2022-07-18T13:44:38Z

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 · 2022-07-18T13:49:00Z

What about if you put flutter_map inside an AbsorbPointer....eg
AbsorbPointer( child: FlutterMap( ... ) )

Does not work.

ibrierley · 2022-07-18T13:58:41Z

How about an IgnorePointer ?

alejandrogiubel · 2022-07-18T14:04:42Z

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 · 2022-07-18T14:04:45Z

How about an IgnorePointer ?

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

erofcon · 2022-07-18T14:09:01Z

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

ibrierley · 2022-07-18T14:25:35Z

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 · 2022-07-19T15:06:07Z

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

JaffaKetchup · 2022-07-20T15:50:49Z

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 · 2022-07-20T16:44:12Z

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 · 2022-07-20T17:00:20Z

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 · 2022-07-20T17:09:14Z

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

alejandrogiubel · 2022-07-20T20:33:48Z

@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

Grabacion.de.pantalla.2022-07-20.a.la.s.4.26.42.p.m.-1.mov

JaffaKetchup · 2022-07-20T21:12:31Z

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 · 2022-07-20T21:13:56Z

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 · 2022-07-20T21:27:09Z

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 · 2022-07-30T13:35:24Z

Any update around that?

JaffaKetchup · 2022-07-30T13:52:47Z

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

alejandrogiubel · 2022-07-30T18:04:08Z

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

selankon · 2022-08-08T14:18:06Z

Hi, same problem on Android here.

Tested with flutter map 2.2.0 and 2.0.0 if I put a map inside a SingleChildScrollView it just scroll horizontally either adding allowPanningOnScrollingParent: false.

JaffaKetchup · 2022-08-08T15:12:32Z

Thanks for the input @alejandrogiubel & @selankon. Right now, we're not looking at a fix, but it does need to be fixed.

stx · 2022-08-10T18:28:34Z

$300 bounty to whoever can fix this (without breaking other things, of course.) Source

JaffaKetchup · 2022-08-12T17:58:59Z

This issue has already been fixed in a development fork.

alejandrogiubel added bug This issue reports broken functionality or another error needs triage This new bug report needs reproducing and prioritizing labels Jul 17, 2022

JaffaKetchup added the non-fatal label Jul 18, 2022

JaffaKetchup removed the needs triage This new bug report needs reproducing and prioritizing label Jul 20, 2022

JaffaKetchup mentioned this issue Jul 20, 2022

GestureDetector doesn't receive events when it's child is a ListView or a ScrollView. flutter/flutter#72996

Closed

JaffaKetchup changed the title ~~Map inside ListView example not work~~ [BUG] Cannot Pan Vertically Inside ListView Jul 20, 2022

mootw mentioned this issue Aug 10, 2022

v3.0.0: Simplify External & Internal Layer Handling #1333

Merged

15 tasks

JaffaKetchup closed this as completed in #1333 Aug 17, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[BUG] Cannot Pan Vertically Inside `ListView` #1308

[BUG] Cannot Pan Vertically Inside `ListView` #1308

alejandrogiubel commented Jul 17, 2022 •

edited by JaffaKetchup

Loading

ibrierley commented Jul 18, 2022

erofcon commented Jul 18, 2022

ibrierley commented Jul 18, 2022

erofcon commented Jul 18, 2022 •

edited

Loading

ibrierley commented Jul 18, 2022

erofcon commented Jul 18, 2022

ibrierley commented Jul 18, 2022

JaffaKetchup commented Jul 18, 2022

ibrierley commented Jul 18, 2022

erofcon commented Jul 18, 2022 •

edited

Loading

ibrierley commented Jul 18, 2022

alejandrogiubel commented Jul 18, 2022 •

edited

Loading

erofcon commented Jul 18, 2022

ibrierley commented Jul 18, 2022

alejandrogiubel commented Jul 18, 2022 •

edited

Loading

erofcon commented Jul 18, 2022

erofcon commented Jul 18, 2022

ibrierley commented Jul 18, 2022

alejandrogiubel commented Jul 19, 2022

JaffaKetchup commented Jul 20, 2022 •

edited

Loading

alejandrogiubel commented Jul 20, 2022

JaffaKetchup commented Jul 20, 2022

JaffaKetchup commented Jul 20, 2022

alejandrogiubel commented Jul 20, 2022

JaffaKetchup commented Jul 20, 2022 •

edited

Loading

JaffaKetchup commented Jul 20, 2022

alejandrogiubel commented Jul 20, 2022

alejandrogiubel commented Jul 30, 2022

JaffaKetchup commented Jul 30, 2022

alejandrogiubel commented Jul 30, 2022

selankon commented Aug 8, 2022

JaffaKetchup commented Aug 8, 2022

stx commented Aug 10, 2022

JaffaKetchup commented Aug 12, 2022

[BUG] Cannot Pan Vertically Inside ListView #1308

[BUG] Cannot Pan Vertically Inside ListView #1308

Comments

alejandrogiubel commented Jul 17, 2022 • edited by JaffaKetchup Loading

ibrierley commented Jul 18, 2022

erofcon commented Jul 18, 2022

ibrierley commented Jul 18, 2022

erofcon commented Jul 18, 2022 • edited Loading

ibrierley commented Jul 18, 2022

erofcon commented Jul 18, 2022

ibrierley commented Jul 18, 2022

JaffaKetchup commented Jul 18, 2022

ibrierley commented Jul 18, 2022

erofcon commented Jul 18, 2022 • edited Loading

ibrierley commented Jul 18, 2022

alejandrogiubel commented Jul 18, 2022 • edited Loading

erofcon commented Jul 18, 2022

ibrierley commented Jul 18, 2022

alejandrogiubel commented Jul 18, 2022 • edited Loading

erofcon commented Jul 18, 2022

erofcon commented Jul 18, 2022

ibrierley commented Jul 18, 2022

alejandrogiubel commented Jul 19, 2022

JaffaKetchup commented Jul 20, 2022 • edited Loading

alejandrogiubel commented Jul 20, 2022

JaffaKetchup commented Jul 20, 2022

JaffaKetchup commented Jul 20, 2022

alejandrogiubel commented Jul 20, 2022

JaffaKetchup commented Jul 20, 2022 • edited Loading

JaffaKetchup commented Jul 20, 2022

alejandrogiubel commented Jul 20, 2022

alejandrogiubel commented Jul 30, 2022

JaffaKetchup commented Jul 30, 2022

alejandrogiubel commented Jul 30, 2022

selankon commented Aug 8, 2022

JaffaKetchup commented Aug 8, 2022

stx commented Aug 10, 2022

JaffaKetchup commented Aug 12, 2022

[BUG] Cannot Pan Vertically Inside `ListView` #1308

[BUG] Cannot Pan Vertically Inside `ListView` #1308

alejandrogiubel commented Jul 17, 2022 •

edited by JaffaKetchup

Loading

erofcon commented Jul 18, 2022 •

edited

Loading

erofcon commented Jul 18, 2022 •

edited

Loading

alejandrogiubel commented Jul 18, 2022 •

edited

Loading

alejandrogiubel commented Jul 18, 2022 •

edited

Loading

JaffaKetchup commented Jul 20, 2022 •

edited

Loading

JaffaKetchup commented Jul 20, 2022 •

edited

Loading