Flutter vertical swipe and avoiding scrolling Listview

Question

In flutter i have a challenge that i want to have a simple Listview with some items which each item have a image and text on bottom of that, you suppose we have Instagram card,

as we know, when we have a vertical ListView we can scroll that top or bottom, scrolling the listview can be happen on each item of the listview.

now on each item of this listview i want to swipe top like with scrolling top, instead of scrolling the listview to top i want to show another widget on this item

my question is how can i avoid scrolling the listview during we swipe on image into card

@pskink my meant is vertical listview with swipe to top on image into listview item — DolDurma, Oct 22 '21 at 06:45

score 2 · Accepted Answer · edited Jul 12 '22 at 09:38

You can wrap your image widget with GestureDetector and use this method to disable the scroll behavior when users tap down on the image widget.

A convenient behavior I found with this method is users can still scroll up or down if they want to (tap down and swipe IMMEDIATELY instead of tap down THEN swipe). This may not be the best way because I can't only block the scroll-up behavior.

This is my example:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ScrollPhysics physics = const AlwaysScrollableScrollPhysics();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView(
        // Add the scroll physics controller here
        physics: physics,
        children: [
          for (int i = 0; i < 20; i++) ...[
            // Wrap the Widget with GestureDetector
            GestureDetector(
              // Disable the scroll behavior when users tap down
              onTapDown: (_) {
                setState(() {
                  physics = const NeverScrollableScrollPhysics();
                });
              },
              // Enable the scroll behavior when user leave
              onTapCancel: () {
                setState(() {
                  physics = const AlwaysScrollableScrollPhysics();
                });
              },
              onPanUpdate: (details) {
                // Catch the swipe up action.
                if (details.delta.dy < 0) {
                  print('Swiping up the element $i');
                }
                // Catch the swipe down action.
                if (details.delta.dy > 0) {
                  print('Swiping down the element $i');
                }
              },
              // Your image widget here
              child: Padding(
                padding: const EdgeInsets.all(20),
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                ),
              ),
            ),
            Center(child: Text('Element $i')),
          ],
        ],
      ),
    );
  }
}

thanks s much, how can i have limited swipe only `y` axis? swipe up or down on every edge works — DolDurma, Oct 22 '21 at 07:50
I don't really understand your question but the above code is only for solving the issue related to ListView (it only has a y-axis behavior) and it only blocks the scroll behavior of the ListView. When you tap down on the image, the scroll controller of the ListView will be disabled, so you can do your own logic with the behavior of users in `onPanUpdate`. — Lam Thanh Nhan, Oct 22 '21 at 08:40

Flutter vertical swipe and avoiding scrolling Listview

1 Answers1