Hover Effect In Flutter

Naveen Srivastava
Apr 12 · 4 min read

In this article, we will explore the Hover Effect in flutter using the hover_effect_package. With the help of the package, we can easily achieve a flutter hover effect. So let’s get started.

Flutter

Hover Effect

Implementation

Code Implement

Hover Effect Code File

Conclusion

Flutter :

“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time, Flutter offers great developer tools, with amazing hot reload”

Hover Effect :

The hover effect library gives a 3d hover effect like any box or container etc. we rotate it around the top, bottom, left, right so it is 3d changes its position in style, in this, we can change its shadow color, depthColor etc.

Demo Module :

Implementation :

You need to implement it in your code respectively :

Step 1: Add dependencies.

Add dependencies to pubspec — yaml file.

dependencies:
hover_effect: ^0.6.0

Step 2: import the package :

import 'package:hover_effect/hover_effect.dart';

Step 3: Run flutter package get

How to implement code in dart file :

Create a new dart file called hover_effect_pager_demo.dart inside the libfolder.

Before creating the hovercard effect, we have taken a container inside which we have implemented the column widget which has a text widget which is the title of the hover effect, then we have taken the container widget in which the hovercard has defined some of its properties, let’s make it a understand in detail by reference.

HoverCard(
builder: (context, hovering) {
return Container(
color: Color(0xFFE9E9E9),
child: Center(
child: FlutterLogo(size: 100),
),
);
},
depth: 10,
depthColor: Colors.grey[500],
shadow: BoxShadow(color: Colors.purple[200], blurRadius: 30, spreadRadius: -20, offset: Offset(0, 40)),
),

Within the HoverCard effect, we have taken a container in which its color and an image is given, the value of the depth attribute of the hovercard is ten, the color of the depth and shadow of the card is also given.

These are snapshots image after running the app.

Code File :

import 'package:flutter/material.dart';
import 'package:flutter_hover_effect_demo/themes/device_size.dart';
import 'package:hover_effect/hover_effect.dart';
class HoverEffectDemo extends StatefulWidget {
@override
_HoverEffectDemoState createState() => _HoverEffectDemoState();
}
class _HoverEffectDemoState extends State<HoverEffectDemo> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:AppBar(
title:Text('Hover Effect Demo'),
),
body:Container(
height:DeviceSize.height(context),
width:DeviceSize.width(context),
child:Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Hover Tilt 3D Effect',
style:TextStyle(
fontSize:15,
fontWeight: FontWeight.w700,
color: Colors.black,
letterSpacing: 2
),
),
SizedBox(height: 50),
Container(
width: 150,
height: 300,
child: HoverCard(
builder: (context, hovering) {
return Container(
color: Color(0xFFE9E9E9),
child: Center(
child: FlutterLogo(size: 100),
),
);
},
depth: 10,
depthColor: Colors.grey[500],
shadow: BoxShadow(color: Colors.purple[200], blurRadius: 30, spreadRadius: -20, offset: Offset(0, 40)),
),
),
],
),
),
);
}
}

Conclusion :

In the article, I have explained the basic structure of the Hover Effect in a flutter; you can modify this code according to your choice. This was a small introduction to Hover Effect On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information in Trying up the Hover Effect in your flutter project. We will show you the Hover Effect is?, and work on it in your flutter applications, So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

Feel free to connect with us
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high…

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high quality. We’ve adopted Design First attitude which helps us deliver applications of highest quality.

Naveen Srivastava

Written by

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high quality. We’ve adopted Design First attitude which helps us deliver applications of highest quality.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store