VelocityX Animated Page View In Flutter
In my previous blog, we saw what an actually VelocityX Animated Box is and how it works using the velocity_x package. For more explanation, I would suggest you guys go through my previous blog to clear basic concepts of velocity x.
VelocityX Animated Box In Flutter
Learn How To Use VelocityX In Your Flutter Appsmedium.com
In this article, we will explore the VelocityX Animated Page View In Flutter. We will also implement a demo and use the velocity-x to create an animated box using the velocity_x package in your flutter applications.
velocity_x | Flutter Package
VelocityX is a 100% free Flutter open-source minimalist UI Framework built with Flutter SDK to make Flutter development…pub. Dev.
Table Of Contents::
Animated Page View
A PageView in Flutter is a widget that shows a list of widgets like pages and images of a carousel. It deals with snapping to the following page on the off chance that you “swipe past the other half” and other truly cool stuff.
We will use the velocity_x package, and for animation, we will use VxAnimatedHeightView() widget. PageView Like most looking over family’s widgets, an approach to tune in to its status changes, our goal here is to listen to these shape changes and animated images when users swipe accordingly.
Demo Module ::
This video shows how to create an animated page view in a flutter and shows how the animated page view will work in your flutter applications using velocity-x. They will change the shape when you swipe the image. They will be shown on your device.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
velocity_x: ^latest version
Step 2: Import
import 'package:velocity_x/velocity_x.dart';
Step 3: Run flutter packages get in the root directory of your app.
Step 4: Enable AndriodX
Add this to your gradle.properties file:
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called velocityx_animated_page_view.dart inside the lib folder.
final Widget child = VxAnimatedHeightView<PageView>(
pageViewChild: PageView.builder(
itemCount: img.length,
controller: PageController(),
itemBuilder: (context, index) {
final String imgUrl = img.elementAt(index);
final double width = context.screenWidth;
final double height = width * calculateImg(index);
return GestureDetector(
onTap: () {
print("press img index is $index");
},
child: Image.network(imgUrl ?? "",
width: width,
height: height,
fit: BoxFit.cover,
alignment: Alignment.topCenter
),
);
},
onPageChanged: (index) {
setState(() {
_currentIndex = index;
});
},
),
itemCount: img.length,
currentPageIndex: _currentIndex,
computeAspectRadio: (index) {
return calculateImg(index);
},
notifyScroll: (scrollNotification) {},
);
We will use VxAnimatedHeightView() widget. In this widget, we will use pageview, item count, controller, and builder. We will set the current index on the setState() method.
List<String> dummyImages() {
return [
"https://images.unsplash.com/photo-1565065598196-aa15dde2cbca? ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDMxfEo5eXJQYUhYUlFZfHxlbnwwfHx8&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1603788059192-43ee674988c0?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDE2fEo5eXJQYUhYUlFZfHxlbnwwfHx8&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDEzMXxKOXlyUGFIWFJRWXx8ZW58MHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1603785608232-44c43cdc0d70?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDY4fEo5eXJQYUhYUlFZfHxlbnwwfHx8&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1581090124360-558a029c4148?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDEwMXxKOXlyUGFIWFJRWXx8ZW58MHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1599524882167-39718267c453?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDIwMXxKOXlyUGFIWFJRWXx8ZW58MHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
];
}
We will create dummy images URL in a list and create an instance named called img.
final List<String> img = dummyImages();
We will add image size and add different animation sizes when the app runs; then, they show our screen.
We create a list named called _imgMap for image size.
final List<double> _imgMap = [1.0, 0.7, 1.1, 0.9, 1.2, 0.8];
We create a calculateImg() method and return _imgMap[]
double calculateImg(int index) {
return _imgMap[index];
}
In VxAnimatedHeightView(),we will required pageviewChild, computeAspectRadio, motifyScroll, itemCount, and but not the least currentPageIndex.
VxAnimatedHeightView(
{@required this.pageViewChild,
@required this.computeAspectRadio,
this.notifyScroll,
this.itemCount,
this.currentPageIndex})
: assert(pageViewChild != null),
assert(computeAspectRadio != null),
assert(itemCount > 0);
Now we will call class VelocityXAnimatedPageView() in home_page.dartinside the lib folder.
body: VStack([
Padding(
padding: const EdgeInsets.all(18.0),
child: Center(
child: Text("Swipe image to show animated
page view",
style: TextStyle(fontSize: 16),
)
),
),
VelocityXAnimatedPageView()
]).
In the body, we will call VStack, and VStack Is the property of velocity X. In this VStack, we will add text and a class VelocityXAnimatedPageView(). Now, run the code and get the final output on your devices.
Code File
import 'package:flutter/material.dart';
import 'package:velocity_x/velocity_x.dart';
class VelocityXAnimatedPageView extends StatefulWidget {
@override
_VelocityXAnimatedPageViewState createState() => _VelocityXAnimatedPageViewState();
}
class _VelocityXAnimatedPageViewState extends State<VelocityXAnimatedPageView> {
final List<double> _imgMap = [1.0, 0.7, 1.1, 0.9, 1.2, 0.8];
int _currentIndex = 0;
List<String> dummyImages() {
return [
"https://images.unsplash.com/photo-1565065598196-aa15dde2cbca?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDMxfEo5eXJQYUhYUlFZfHxlbnwwfHx8&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1603788059192-43ee674988c0?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDE2fEo5eXJQYUhYUlFZfHxlbnwwfHx8&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDEzMXxKOXlyUGFIWFJRWXx8ZW58MHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1603785608232-44c43cdc0d70?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDY4fEo5eXJQYUhYUlFZfHxlbnwwfHx8&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1581090124360-558a029c4148?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDEwMXxKOXlyUGFIWFJRWXx8ZW58MHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1599524882167-39718267c453?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDIwMXxKOXlyUGFIWFJRWXx8ZW58MHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
];
}
double calculateImg(int index) {
return _imgMap[index];
}
@override
Widget build(BuildContext context) {
final List<String> img = dummyImages();
if (img.isEmpty) {
return Container();
}
final Widget child = VxAnimatedHeightView<PageView>(
pageViewChild: PageView.builder(
itemCount: img.length,
controller: PageController(),
itemBuilder: (context, index) {
final String imgUrl = img.elementAt(index);
final double width = context.screenWidth;
final double height = width * calculateImg(index);
return GestureDetector(
onTap: () {
print("press img index is $index");
},
child: Image.network(imgUrl ?? "",
width: width,
height: height,
fit: BoxFit.cover,
alignment: Alignment.topCenter
),
);
},
onPageChanged: (index) {
setState(() {
_currentIndex = index;
});
},
),
itemCount: img.length,
currentPageIndex: _currentIndex,
computeAspectRadio: (index) {
return calculateImg(index);
},
notifyScroll: (scrollNotification) {},
);
return child;
}
}
Conclusion:
In the article, I have explained the basic structure of a VelocityX Animated Page View using the VxAnimatedHeightView widget; you can modify this code according to your choice. This was a small introduction to VelocityX Animated Page View 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 VelocityX Animated Page View in your flutter projects. This demo program uses velocity_x packages and VxAnimatedHeightView widget in a flutter and shows how an animated page view will work 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 VelocityX Animated Page View Demo:
flutter-devs/flutter_velocityX_animated_page_view_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.
