In my interface I have a row of containers like this

.

The idea is that when I pass my finger on these containers, the one under my finger gets bigger (and other changes but that's not the point).

I know how to use GestureDetector and get it bigger when I tap on the container with "onTap". But if you keep your finger down and drag it to another container nothing change. Idealy I'd like to be able to detect when the user pass his finger hover a container while touching the screen.

Appreciate if someone can advise. Thank you in advance!

CodePudding user response：

You can use onVerticalDragUpdate on GestureDetector.

class DraUILien extends StatefulWidget {
  const DraUILien({super.key});

  @override
  State<DraUILien> createState() => _DraUILienState();
}

class _DraUILienState extends State<DraUILien> {
  int? activeIndex;

  final double containerWidth = 30;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: GestureDetector(
        onVerticalDragUpdate: (details) {
          activeIndex =
              details.localPosition.dx ~/ (containerWidth   16); //16 padding
          setState(() {});
        },
        child: SizedBox(
          height: 200,
          child: Row(
            children: List.generate(
              10,
              (index) => Padding(
                padding: const EdgeInsets.all(8.0),
                child: AnimatedContainer(
                  duration: Duration(milliseconds: 300),
                  color: index == activeIndex ? Colors.blue : Colors.grey,
                  width: containerWidth,
                  height: index == activeIndex ? 200 : 100,
                ),
              ),
            ),
          ),
        ),
      )),
    );
  }
}

Play with the logic for more customization. If you need onTap functionality try including onPanDown