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

Answer 1

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