CODEWITHSUNDEEP
flutterwidgetonhover
Naman Goel
Naman Goel

Reputation: 9

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

Upvotes: 0

Views: 58

Answers (3)

Anandh Krishnan
Anandh Krishnan

Reputation: 6022

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

Upvotes: -1

Anu Desai
Anu Desai

Reputation: 435

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,

Upvotes: 0

A-E
A-E

Reputation: 3327

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)
          ),
          
        ),
      )

Upvotes: 0

Related Questions