Hi Guys, Welcome to Proto Coders Point.
In this flutter tutorial, we will learn how to give hover effect in flutter web.
Note: Hover effect in flutter can only be implemented on flutter web app, therefore onhover in mobile device will not give any hovering effect.
Video Tutorial
so let’s begin with the coding.
How to give hover effect to any widget in flutter
1. Create a flutter project
Open you favorite IDE & create/open a new flutter project, I am using android-studio to build flutter projects.
File > New > New Flutter Project ( Give a good name to flutter project & finish) your project will get created.
2. Create a dart file OnHover.dart
Under lib directory, create a new dart file & name it as OnHover.dart.
So OnHover.dart will be our custom stateful widget which has properties such as animatedContainer & MouseRegion widget which is use to detect when our mouse pointer comes in MouseRegion to perform hover effect in flutter with animation to any widgets.
OnHover.dart
import 'package:flutter/material.dart';
class OnHover extends StatefulWidget {
final Widget Function(bool isHovered) builder;
const OnHover({Key? key, required this.builder}) : super(key: key);
@override
_OnHoverState createState() => _OnHoverState();
}
class _OnHoverState extends State<OnHover> {
bool isHovered = false;
@override
Widget build(BuildContext context) {
final hovered = Matrix4.identity()..translate(0,-10,0);
final transform = isHovered ? hovered : Matrix4.identity();
return MouseRegion(
onEnter: (_)=> onEntered(true),
onExit: (_)=> onEntered(false),
child: AnimatedContainer(
duration: Duration(milliseconds: 300),
transform: transform,
child: widget.builder(isHovered),
),
);
}
void onEntered(bool isHovered){
setState(() {
this.isHovered = isHovered;
});
}
}
3. Add Hover effect to any widget in flutter
Now, our OnHover custom widget is ready(above), so now we can use it to give animation & hover effect to any widget in flutter.
To do that you need to simply wrap any widget with OnHover widget builder to apply Hovering effect.
Examples:
Flutter text animation on hover – change text color
OnHover(builder: (isHovered){
return Text("Flutter Text on hover - change text color on hovering with animation");
}),
Change Container Color on Hover
OnHover(builder: (isHovered){
final color = isHovered ? Colors.grey : Colors.blue;
return
Container(
color: color,
width: 100,
height: 100,
);
}),
Hover elevation flutter
OnHover(builder: (isHovered){
return
PhysicalModel(
color: Colors.blue,
elevation: isHovered ? 16 : 0, // if ishovered true then show elevation on hovering
child: Container(
width: 100,
height: 100,
),
);
}),
change flutter button color on hover
OnHover(builder: (isHovered){
final color = isHovered ? Colors.red : Colors.blue;
return
ElevatedButton(
style: ElevatedButton.styleFrom(primary: color),
onPressed: (){}, child: Text('Change Button Color on hover')
);
}),
main.dart complete code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hover_eg/OnHover.dart';
import 'package:flutter_hover_eg/text_page.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Hover Example"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
OnHover(
builder: (isHovered) {
final color = isHovered ? Colors.orange : Colors.redAccent;
return PhysicalModel(
color: Colors.white,
elevation: isHovered ? 16 : 0,
child: Container(
height: 50,
width: 200,
color: color,
child: Center(
child: Text("Proto Coders Point"),
)),
);
},
),
SizedBox(
height: 30,
),
OnHover(builder: (isHovered) {
return Text(
"Flutter Text on hover - change text color on hovering with animation");
}),
SizedBox(
height: 30,
),
//if isHovered is true then show elevation else set elevation to 0
OnHover(builder: (isHovered) {
return PhysicalModel(
color: Colors.blue,
elevation: isHovered ? 16 : 0,
child: Container(
width: 100,
height: 100,
),
);
}),
OnHover(builder: (isHovered) {
final color = isHovered ? Colors.grey : Colors.blue;
return Container(
color: color,
width: 100,
height: 100,
);
}),
SizedBox(
height: 30,
),
OnHover(builder: (isHovered) {
final color = isHovered ? Colors.red : Colors.blue;
return ElevatedButton(
style: ElevatedButton.styleFrom(primary: color),
onPressed: () {},
child: Text('Change Button Color on hover'));
}),
],
),
),
);
}
}
