Flutterexperts

The flutter widget is built using a modern framework. It is like a reaction. In this, we start with the widget to create any application. Each component in the screen is a widget. The widget describes what his outlook should be given his present configuration and condition. Widget shows were similar to its idea and current setup and state. Flutter is a free and open-source tool to develop mobile, desktop, web applications with a single code base.

Hello friends, I will talk about my new blog on Image Parallax Scrolling Effect In Flutter. We will also implement an Image Parallax Scrolling Effect Flutter demo, describe his properties, and use them in your flutter applications. So let’s get started.

---

Table Of Contents :

Image Parallax Scrolling Effect

Code Implement

Code File

Conclusion

---

Image Parallax Scrolling Effect :

The use of Image Parallax Scrolling when we scroll down the list of any image, then we see that the image also appears scrolling upwards at a very slow speed, as soon as we scroll the image list from the bottom. It then slows down in its position as if the card in the list is in the foreground, an effect known as parallax.

Code Implement :

You need to implement it in your code respectively:

First of all, we have taken a listview builder to show the image parallax scrolling image in the list inside which the image and its title have been defined.

ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: locations.length,
itemBuilder: (BuildContext context, int index) {
return _buildEssentialsBeginnersModel(locations[index], index);
},
),

After this, we have created a model class named ImageList to show the items in the list in which Image and Title are two values.

class ImageList {
const ImageList({
required this.title,
required this.imageUrl,
});

final String title;
final String imageUrl;
}
const imageList = [
ImageList(
title: 'U.S.A',
imageUrl: 'assets/images/boston1.jpg',
),
ImageList(
title: 'Singapore',
imageUrl: 'assets/images/boston2.jpeg',
),
ImageList(
title: 'Peru',
imageUrl: 'assets/images/business.jpeg',
),
];

After creating the model class, we have created a class named ParallaxFlowDelegate to parse the image, which extends from FlowDelegate, inside this class, the scrolling position of the list and the vertical alignment of the list, etc. have been defined, which is the background of the image in the background of the image. the effect will be visible.

Now we will initialize the ParallaxFlowDelegate in the item list of the Image. To show the items of the list, we have created a method in the listview named _buildImageModel inside which we have used the Stack() Widget in which we have defined the ParallaxFlowDelegate in the delegate property of the Flow() Widget which has scrollable. Properties like listItemContext, scrollable, backgroundImageKey have been used which gives a parallax effect to the card inside the image.

Flow(
delegate: ParallaxFlowDelegate(
scrollable: Scrollable.of(context)!,
listItemContext: context,
backgroundImageKey: _backgroundImageKey,
),
children: [
Image.asset(
imageUrl,
key: _backgroundImageKey,
fit: BoxFit.cover,
),
],
)

Code File :

import 'package:flutter/material.dart';
import 'package:flutter_parallax_effect_demo/Data/data.dart';
import 'package:flutter_parallax_effect_demo/main.dart';
import 'package:flutter_parallax_effect_demo/widget.dart';
class ExampleParallax extends StatelessWidget {
const ExampleParallax({
Key? key,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Container(
child:ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: locations.length,
itemBuilder: (BuildContext context, int index) {
return _buildEssentialsBeginnersModel(locations[index], index);
},
),
);
}

Widget _buildEssentialsBeginnersModel(Location items, int index) {
return LocationListItem(
imageUrl: items.imageUrl,
name: items.name,
country: items.place,
);
}
}

class LocationListItem extends StatelessWidget {
LocationListItem({
Key? key,
required this.imageUrl,
required this.name,
required this.country,
}) : super(key: key);

final String imageUrl;
final String name;
final String country;
final GlobalKey _backgroundImageKey = GlobalKey();

@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
child: AspectRatio(
aspectRatio: 16 / 9,
child: ClipRRect(
borderRadius: BorderRadius.circular(16),
child: Stack(
children: [
_buildParallaxBackground(context),
_buildGradient(),
_buildTitleAndSubtitle(),
],
),
),
),
);
}

Widget _buildParallaxBackground(BuildContext context) {
return Flow(
delegate: ParallaxFlowDelegate(
scrollable: Scrollable.of(context)!,
listItemContext: context,
backgroundImageKey: _backgroundImageKey,
),
children: [
Image.network(
imageUrl,
key: _backgroundImageKey,
fit: BoxFit.cover,
),
],
);
}

Widget _buildGradient() {
return Positioned.fill(
child: DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.transparent, Colors.black.withOpacity(0.7)],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0.6, 0.95],
),
),
),
);
}

Widget _buildTitleAndSubtitle() {
return Positioned(
left: 20,
bottom: 20,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
name,
style: const TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
Text(
country,
style: const TextStyle(
color: Colors.white,
fontSize: 14,
),
),
],
),
);
}
}

Conclusion :

In this article, I have explained Image Parallax Scrolling Effect In Flutter, which you can modify and experiment with according to your own, this little introduction was from the Image Parallax Scrolling Effect In Flutter demo from our side.

I hope this blog will provide you with sufficient information in Trying up the Explore Image Parallax Scrolling Effect In Flutter in your flutter project. We showed you the Explore Image Parallax Scrolling Effect In Flutter 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.