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

Is there any way to add a effect on a widget on hover in flutter

I dont want to use the WidgetStateProperty.resolveWith function to resolve it.

i cant find any thing online . please help me in finding a solution to the problem. Is there any way to add a effect on a widget on hover in flutter

Tags:

3

Answers


  1. 0

    You can wrap the widget that is supposed to respond to mouse hovering with MouseRegion widget as follows:

    MouseRegion(
        onHover: (hoverEvent){
          // mouse pointer entered widget scope
        },
        onExit: (event){
         // do what you want, mouse exits the widget scope
        },
        child: Container(

          child: Center(
            child: Text(text)
          ),
          
        ),
      )
    Login or Signup to reply.
  2. 0

    Using Inkwell You can add hover,
    Example:

    InkWell(
  onTap: () => null,
  onHover: (hovering) {
    // Handle hover state (e.g., change color, size, etc.)
    // Set a boolean variable to track whether the mouse is hovering.
  },
  child: const Text(
    'Hello, world',
    style: TextStyle(fontSize: 30),
  ),
)

    or can be used MouseRegion
    Eg:

    MouseRegion(
  onEnter: (_) {
    // Handle mouse enter (hover start)
  },
  onExit: (_) {
    // Handle mouse exit (hover end)
  },
  child: YourWidget(),
)

    I hope this may help you to solve it,

    Login or Signup to reply.
  3. 0 
    import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Hover Effect Example')),
        body: Center(
          child: HoverButton(),
        ),
      ),
    );
  }
}

class HoverButton extends StatefulWidget {
  @override
  _HoverButtonState createState() => _HoverButtonState();
}

class _HoverButtonState extends State<HoverButton> {
  bool _isHovered = false;

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (_) {
        setState(() {
          _isHovered = true;
        });
      },
      onExit: (_) {
        setState(() {
          _isHovered = false;
        });
      },
      child: AnimatedContainer(
        duration: Duration(milliseconds: 200),
        padding: EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: _isHovered ? Colors.red : Colors.blue,
          borderRadius: BorderRadius.circular(8),
        ),
        child: Text(
          'Hover Over Me!',
          style: TextStyle(
            color: Colors.white,
            fontSize: 16,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search