Hover Effect Nav Bar Flutter

Question

I am creating a simple web with flutter where i created a top-nav bar I want to animate the text button when mouse hover on them I did this by using MouseRegion but the thing is instead of animating individual button/widget the animation applies on all widget in a row.

I want hover animation effect on that specific button instead of all in row how to do?

My NavigationBar code:

class _DesktopNavBarState extends State<DesktopNavBar> {
  final transform = Matrix4.identity()
    ..translate(0, -10, 0)
    ..scale(1, 1);
  bool isHovered = false;
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      height: 100,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          RichText(
            textScaleFactor: 1.3,
            text: const TextSpan(
              style: TextStyle(
                color: Colors.black,
                fontSize: 25,
              ),
              children: <TextSpan>[
                TextSpan(
                  text: "Rizwan",
                  style: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.bold,
                    fontFamily: "Joining",
                  ),
                ),
                TextSpan(
                  text: " •",
                  style: TextStyle(
                    fontSize: 30,
                    color: Colors.green,
                    fontWeight: FontWeight.bold,
                    fontFamily: "Joining",
                  ),
                ),
              ],
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              MouseRegion(
                cursor: SystemMouseCursors.click,
                onEnter: (event) {
                  setState(() {
                    isHovered = true;
                  });
                },
                onExit: (event) {
                  setState(() {
                    isHovered = false;
                  });
                },
                child: AnimatedContainer(
                  duration: const Duration(milliseconds: 200),
                  transform: isHovered ? transform : Matrix4.identity(),
                  child: TextButton(
                    onPressed: () {},
                    child: Text(
                      "Home",
                      style: TextStyle(
                        color: isHovered ? Colors.blue : Colors.black,
                        fontSize: 25,
                      ),
                    ),
                  ),
                ),
              ),
              MouseRegion(
                cursor: SystemMouseCursors.click,
                onEnter: (event) {
                  setState(() {
                    isHovered = true;
                  });
                },
                onExit: (event) {
                  setState(() {
                    isHovered = false;
                  });
                },
                child: AnimatedContainer(
                  duration: const Duration(milliseconds: 200),
                  transform: isHovered ? transform : Matrix4.identity(),
                  child: TextButton(
                    onPressed: () {},
                    child: Text(
                      "About",
                      style: TextStyle(
                        color: isHovered ? Colors.blue : Colors.black,
                        fontSize: 25,
                      ),
                    ),
                  ),
                ),
              ),
              MouseRegion(
                cursor: SystemMouseCursors.click,
                onEnter: (event) {
                  setState(() {
                    isHovered = true;
                  });
                },
                onExit: (event) {
                  setState(() {
                    isHovered = false;
                  });
                },
                child: AnimatedContainer(
                  duration: const Duration(milliseconds: 200),
                  transform: isHovered ? transform : Matrix4.identity(),
                  child: TextButton(
                    onPressed: () {},
                    child: Text(
                      "Work",
                      style: TextStyle(
                        color: isHovered ? Colors.blue : Colors.black,
                        fontSize: 25,
                      ),
                    ),
                  ),
                ),
              ),
              MouseRegion(
                cursor: SystemMouseCursors.click,
                onEnter: (event) {
                  setState(() {
                    isHovered = true;
                  });
                },
                onExit: (event) {
                  setState(() {
                    isHovered = false;
                  });
                },
                child: AnimatedContainer(
                  duration: const Duration(milliseconds: 200),
                  transform: isHovered ? transform : Matrix4.identity(),
                  child: TextButton(
                    onPressed: () {},
                    child: Text(
                      "Contact",
                      style: TextStyle(
                        color: isHovered ? Colors.blue : Colors.black,
                        fontSize: 25,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

score 1 · Answer 1 · answered Dec 17 '22 at 19:38

You can use the style instead and check if the current material state contains hovered. Remove the MouseRegion and AnimatedContainer and try with only the TextButton like this:

return TextButton(
  onPressed: () {},
  style: TextButton.styleFrom().copyWith(
    animationDuration: Duration.zero,
    textStyle: MaterialStateProperty.resolveWith(
      (states) {
        if (states.contains(MaterialState.hovered)) {
          return const TextStyle(
            fontSize: 20.0,
          );
        }
        return const TextStyle(
          fontSize: 16.0,
        );
      },
    ),
    foregroundColor: MaterialStateProperty.resolveWith(
      (states) {
        if (states.contains(MaterialState.hovered)) {
          return Colors.blue;
        }
        return Colors.black;
      },
    ),
  ),
  child: const Text('Boton'),
);

In this example I used an animationDuration of zero but you can play with that too!

Hover Effect Nav Bar Flutter

1 Answers1