I want mouseover to act like Twitter's unfollow button:
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!
CodePudding user response:
I made a sample code for you. you can easily track mouse and make what you want with AnimatedContainer
or AnimatedSwitcher
.
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),
)),
),
),
),
);
}
}
CodePudding user response:
Wrap your GestureDetector
with MouseRegion
to get mouse event.
return MouseRegion(
onEnter: (event) {
setState(() {
following = true;
});
},
onExit: (event) {
setState(() {
following = false;
});
},
child: GestureDetector(