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

How to make mouseover act like Twitter's unfollow button? – Flutter

I want mouseover to act like Twitter’s unfollow button:

enter image description here

enter image description here

If I follow someone on Twitter, I hover over the button with the text "Follow" and the color of the button changes to red with the text "Unfollow". How can I achieve this?

I googled but couldn’t find any results.

My code:

GestureDetector(
  onTap: () => setState(() => following = !following),
  child: Container(
    padding: const EdgeInsets.all(10.0),
    decoration: following ? BoxDecoration(border: Border.all(color: Colors.cyan), borderRadius: BorderRadius.circular(25.0)) : BoxDecoration(color: Colors.cyan, borderRadius: BorderRadius.circular(25.0)),
    child: Row(
      children: [
        Icon(following ? Icons.favorite : Icons.person_add_alt, color: following ? Colors.cyan : Colors.white),
        const SizedBox(width: AppSizes.10.0),
        Text(
          following ? "Following" : "Follow",
          style: TextStyle(color: following ? Colors.cyan : Colors.white),
        ),
      ],
    ),
  ),
),

Feel free to leave a comment if you need more information.

How to make mouseover act like Twitter’s unfollow button? I would appreciate any help. Thank you in advance!

Tags:

2

Answers


  1. 0

    Wrap your GestureDetector with MouseRegion to get mouse event.

     return MouseRegion(
      onEnter: (event) {
        setState(() {
          following = true;
        });
      },
      onExit: (event) {
        setState(() {
          following = false;
        });
      },
      child: GestureDetector(
    Login or Signup to reply.
  2. 0

    Short Answer

    use Mouse Region Widget like below and Track mouse events

     MouseRegion(
      onEnter: _onEnterMouse,
      onExit: _onExitMouse,
      child: AnimatedContainer(

    Long Answer

    I made a sample code for you. you can easily track mouse and make what you want with AnimatedContainer or AnimatedSwitcher.

    here is the result
    enter image description here

    import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool isMouseEnter = true;
  String buttonText = "Follow";

  void _onExitMouse(PointerEvent details) {
    setState(() {
      isMouseEnter = false;
      buttonText = "Following";
    });
  }

  void _onEnterMouse(PointerEvent details) {
    setState(() {
      isMouseEnter = true;
      buttonText = "UnFollow";
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: MouseRegion(
          onEnter: _onEnterMouse,
          onExit: _onExitMouse,
          child: AnimatedContainer(
            width: 200,
            height: 50,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(isMouseEnter ? 30 : 10)),
                border: Border.all(
                    color: isMouseEnter ? Colors.red : Colors.lightBlueAccent,
                    width: 2)),
            duration: const Duration(milliseconds: 300),
            child: AnimatedSwitcher(
                duration: const Duration(milliseconds: 300),
                child: Text(
                  buttonText,
                  key: ValueKey(isMouseEnter),
                  style: Theme.of(context).textTheme.headline5?.copyWith(
                      color: isMouseEnter ? Colors.red : Colors.lightBlueAccent),
                )),
          ),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search