Search code examples
gridviewdartfluttergesturedetector

Flutter: Tap delay with GestureDetector in a Tile of a GridView


Normally, the below behavior is quick in nature. However, inside a GridView (or any ScrollView I assume (tried ListView, too)) the performance seems to be very poor. When I tap on the screen the opacity of the Container increases, but after a delay. Any idea what I am missing?

import "package:flutter/material.dart";
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          body: MyWidget()
        )
      );
    }
}
class MyWidgetState extends State<MyWidget> {
  double opacity = 0.2;
  @override
    Widget build(BuildContext context) {
      return GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3
        ),
        itemBuilder: (context, index) {
          return GestureDetector(
            onTap: () {
              setState(() {
                opacity = 0.2;                
              });
            },
            onTapDown: (details) {
              setState(() {
                opacity = 1.0;                
              });
            },
            child: Container(
              color: Colors.red.withAlpha((255 * opacity).toInt())
            )
          );
        },
      );
    }
}
class MyWidget extends StatefulWidget {
  @override
    State<StatefulWidget> createState() {
      return MyWidgetState();
    }
}

Solution

  • Maybe Listener would be faster in your case

    Listener(
      onPointerDown: (PointerDownEvent event) {
        setState(() {
          opacity = 1.0;
        });
      },
      onPointerUp: (PointerUpEvent event) {
        setState(() {
          opacity = 0.2;
        });
      },
      child: Container(
          color: Colors.red.withAlpha((255 * opacity).toInt())
      ),
    )