TomBuv
TomBuv

Reputation: 23

Flutter - Detect when finger enter in a container

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!

Upvotes: 0

Views: 1119

Answers (1)

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63569

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

Upvotes: 1

Related Questions