Flutterexperts

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.

hover_effect | Flutter Package
Hover – Tilt 3D Effect Takes any child widget and enables Hover/Tilt 3D functionality to it import…pub.dev

---

Table Of Contents :

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.