Mouse Parallax Effect In Flutter
Animation is an intricate system in any mobile application. Animation improves the user experience to another level regardless of its intricacy and gives a rich user cooperation. Because of its wealth, animation turns into a necessary piece of current mobile applications.
The Flutter system perceives the significance of Animation and gives a basic and natural structure to build up a wide range of animations. There’s continually something so fascinating about animation, and parallax is one of those that consistently gets my eyes.
In this blog, we will explore the Mouse Parallax Effect In Flutter. We will also implement a demo program of the mouse parallax effect with pointer-based parallax animations using the mouse_parallax package in your flutter applications.
mouse_parallax | Flutter Package
A Pointer-Based Animation Package. The goal of this package is to make mouse and touch-based parallax effects as a simple…pub. dev
Table Of Contents :
Introduction :
A Pointer-Based Animation Package. A simple way to implement pointer-based parallax animations on multiple platforms. Parallax is nothing new. It has been around for decades and was one of those first effects that added extra layers of depth into video games, movies, and simple 3D-like images. The goal of this package is to make mouse and touch-based parallax effects as simple as possible.
Demo Module :
This demo video shows how to use the mouse parallax effect in a flutter. It shows how the mouse parallax effect will work using the mouse_parallax package in your flutter applications and shows that when your mouse and the touch-based pointer will move, the picture also moves in this direction. Feel like a 3D parallax effect. It will be shown the parallax animations effects on your device.
Attributes :
To get started with the Parallax effect, use a ParallaxStack. There are some attributes of ParallaxStack are:
- > useLocalPosition: This attribute is used whether the parallax should be referenced from the size and position of the [ParallaxStack]. If it is false, the Parallax will be measured based on the screen’s width and height. Otherwise, it is measured based on the size of the [ParallaxStack]. It is recommended to set this to true.
- > referencePosition: This attribute is used where should reference the parallax effect from. This is a scale from 0–1. Its default value is 0.5, meaning that the parallax is referenced from the center.
- > layers: This attribute has used a list of [ParallaxLayer]’s.
- > touchBased: This attribute is used whether the parallax stack should listen to touches instead of hover events.
- > resetOnExit: This attribute is used whether the animation should reset to the default position when the pointer leaves the hover region.
- > resetDuration: This attribute is used to how long it should take the widget to reset when the pointer leaves the hover region.
Implementation :
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
mouse_parallax:
Step 2: Import
import 'package:mouse_parallax/mouse_parallax.dart';
Step 3: Run flutter packages in your app’s root directory.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called demo_page.dart inside the lib folder.
A Parallax Stack that does not animate its children. It is animated by the [ParallaxStack]. A Widget that allows you to stack and animate the children of parallax layers.
ParallaxStack(
resetOnExit: true,
useLocalPosition:true,
referencePosition: 0.6,
dragCurve : Curves.easeIn,
resetCurve: Curves.bounceOut,
layers: [ParallaxLayer(..)],
),
In the body, we will use ParallaxStack() for the parallax effect. Inside, we will add a dragCurve means the duration of the animation when pointer events occur and when the widget transforms. By default, it is set to Curves ease. Add a resetCurve means the curve of the animation that occurs when the pointer leaves the hover region. It will only apply when resetOnExit is true. We will add resetOnExit means the animation should reset to the default position when the pointer leaves the hover region. We will add referencePosition means where we should reference the parallax effect from. We will set a 0.6 scale. Also, we will add layers means to add a list of multiple ParallaxLayer()’s. Below, we will define the code.
ParallaxLayer(
yRotation: 2.0,
xRotation: 0.80,
xOffset: 90,
yOffset: 80,
child: Center(
child: Container(
height: MediaQuery.of(context).size.height*0.5,
width: MediaQuery.of(context).size.width*0.7,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset("assets/powered_by.png",),
Image.asset("assets/devs.jpg"),
],
)),
),
),
A layer in the parallax stack. This serves as a blueprint for the transformations of a widget in a ParallaxStack. It contains all the animatable properties of the child. This is not a widget. In ParallaxLayer(), we will add yRotation means how much the child should rotate on the y axis when a pointer event occurs. The nature of the rotation is left-right. Next, we will add xRotation means how much the child should rotate on the x-axis when a pointer event occurs. The nature of the rotation is up-down. We will add xOffset, and yOffset means how much the child should translate on the horizontal and vertical axis when a pointer event occurs. It’s child property, and we will add images. When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File :
import 'package:flutter/material.dart';
import 'package:mouse_parallax/mouse_parallax.dart';
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xffffffff),
appBar: AppBar(
automaticallyImplyLeading: false,
title: Text("Flutter Mouse Parallax Demo"),
backgroundColor: Colors.black,
),
body: ParallaxStack(
resetOnExit: true,
useLocalPosition:true,
referencePosition: 0.6,
dragCurve : Curves.easeIn,
resetCurve: Curves.bounceOut,
layers: [
ParallaxLayer(
yRotation: 2.0,
xRotation: 0.80,
xOffset: 90,
yOffset: 80,
child: Center(
child: Container(
height: MediaQuery.of(context).size.height*0.5,
width: MediaQuery.of(context).size.width*0.7,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset("assets/powered_by.png",),
Image.asset("assets/devs.jpg"),
],
)),
),
),
],
),
);
}
}
Conclusion :
In the article, I have explained the Mouse Parallax Effect basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Mouse Parallax Effect On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Mouse Parallax Effect in your flutter projects. We will show you what the Introduction is?. Some parallax stack attributes make a demo program for working Mouse Parallax Effect and show images will move with the mouse and touch-based parallax effects using the mouse_parallax package 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.
find the source code of the Flutter Mouse Parallax Effect Demo:
flutter-devs/flutter_mouse_parallax_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
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.
