Question 177171 in Flutter Question posted in
The official Flutter documentation can be found here.

Can Flutter create an effect when selecting an element?

I’m creating an application in flutter and I need to reproduce the effect shown in the video below.

video

I remember having done this before, but I don’t remember anymore. I’ve tried looking in several places, but even the search is difficult, because I don’t remember how to do it. Can anyone help me reproduce this effect?

Tags:

2

Answers


  1. 0

    you need to be more specific, if the app is on the web or on mobile, if it is on the web you can add a MouseRegion widget and change the color of the button, the name of what you are looking for is onHover

    MouseRegion(
      onEnter: (_) {
          _buttonColor = true;
      },
      onExit: (_) {
          _buttonColor = false;
      },
      child: Container(
        width: 200,
        height: 200,
        color: _buttonColor ? Colors.blue.withOpacity(0.8) : Colors.blue,
      ),
    );
    Login or Signup to reply.
  2. 0

    I assume you are referring to the hover effect on the navigation items?
    But you could use an AnimatedContainer and InkWell combination to wrap each item and if you make them reusable Widgets it will make the individual scope of isHovered easy. But you can make use of the InkWell onHover attribute to set a value to trigger animation change

    AnimatedContainer(
 duration: Duration(milliseconds: 500), // Can be whatever duration you want
 curve: Curves.easeInOut, // can be whatever animation you want
 color: isHovered ? Colors.black45 : Colors.transparent,
 child: InkWell(
  onHover: (value) {
   setState(() {
    isHovered = !isHovered;
   });
  },
  child: Widget(),
 ),
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search