Flutter Provider Inkwell

Question

I am using INKWELL to create a menu animation. I would like to create an animation on only one button at a time. But its not work

enter image description here

 Widget build(BuildContext context) {
return Container(
  color: Color(0xFF171c28),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: [
      SizedBox(
        width: 30,
      ),
      Underlinedbutton(
        name: 'Start',
        number: '001',
        context: context,
        onhow: (value) {
          Provider.of<bntcontroller>(context, listen: false).colo(value);
        },
      ),
      Underlinedbutton(
          name: 'O mnie',
          number: '002',
          context: context,
          onhow: (value1) {
            Provider.of<bntcontroller>(context, listen: false).colo(value1);
          }),
  

Controller

  class bntcontroller extends ChangeNotifier {
  bool _isHover = false;

  bool get isHover => _isHover;

  void colo(bool value) {
    _isHover = value;
    notifyListeners();
  }
}

To make a Animation effect i use Visibility and inkwell widget.

  Widget build(BuildContext context) {
    return InkWell(
      radius: 20,
      onTap: () {},
      onHover: onhow,
      borderRadius: BorderRadius.circular(5),
      hoverColor: Colors.transparent,
      child: SizedBox(
        width: MediaQuery.of(context).size.width * 0.15,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              alignment: Alignment.topRight,
              child: Visibility(
                  visible: Provider.of<bntcontroller>(context).isHover,
                  child: Container(
                    height: 5,
                    width: 5,
                    color: Colors.red,
                  )),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  number,
                  style: textstyl(11, Color.fromARGB(255, 250, 246, 246)),
                ),
                SizedBox(
                  width: 1,
                ),
                Text(
                  name.toUpperCase(),
                  style: textstyl(20, Colors.blue),
                )
              ],
            ),
            Container(
              alignment: Alignment.bottomLeft,
              child: Visibility(
                  visible: Provider.of<bntcontroller>(context).isHover,
                  child: Container(
                    height: 5,
                    width: 5,
                    color: Colors.red,
                  )),
            ),
          ],
        ),
      ),
    );
  }
}

The animation is constantly displayed on all tiles in the menu. I can't separate it

Answer 1

try to use GestureDetector maybe it will work

if its not work use provider to state management cuz there is some time update on a page and don`t update on another

 Widget build(BuildContext context) {
return GestureDetector(
  
  onTap: () {},
  onHover: onhow,
  
  child: SizedBox(
    width: MediaQuery.of(context).size.width * 0.15,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          alignment: Alignment.topRight,
          child: Visibility(
              visible: Provider.of<bntcontroller>(context).isHover,
              child: Container(
                height: 5,
                width: 5,
                color: Colors.red,
              )),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              number,
              style: textstyl(11, Color.fromARGB(255, 250, 246, 246)),
            ),
            SizedBox(
              width: 1,
            ),
            Text(
              name.toUpperCase(),
              style: textstyl(20, Colors.blue),
            )
          ],
        ),
        Container(
          alignment: Alignment.bottomLeft,
          child: Visibility(
              visible: Provider.of<bntcontroller>(context).isHover,
              child: Container(
                height: 5,
                width: 5,
                color: Colors.red,
              )),
        ),
      ],
    ),
  ),
);

} }