In this article, we will explore the Parallax Effect With PageView In Flutter. We see how to execute a demo program. Using a single background image scrolling in your Flutter applications, we will tell you how to create a parallax effect with pageview.
If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.
Table Of Contents::
Introduction
The below demo video shows how to create a parallax effect with pageview in Flutter and how a parallax effect will work on pageview using a single background image in your Flutter applications. We will show a single image background scrolling using the parallax effect. It will be shown on your device.
Demo Module::
Code Implement:
Create a new dart file called DataImage.dart inside the lib folder.
In this class, we will add three parameters pageCount, screenSize, and offset. We will return the Sizebox with height and width and child we will add an image with alignment and fit.
class DataImage extends StatelessWidget {
const DataImage({
Key? key,
required this.pageCount,
required this.screenSize,
required this.offset,
}) : super(key: key);
final Size screenSize;
final int pageCount;
final double offset;
@override
Widget build(BuildContext context) {
int lastPageIdx = pageCount - 1;
int firstPageIdx = 0;
int alignmentMax = 1;
int alignmentMin = -1;
int pageRange = (lastPageIdx - firstPageIdx) - 1;
int alignmentRange = (alignmentMax - alignmentMin);
double alignment = (((offset - firstPageIdx) * alignmentRange) / pageRange) + alignmentMin;
return SizedBox(
height: screenSize.height,
width: screenSize.width,
child: Image(
image: const AssetImage('assets/images/living_room.jpg'),
alignment: Alignment(alignment, 0),
fit: BoxFit.fitHeight,
),
);
}
}
Create a new dart file called Item.dart inside the lib folder.
In this class, we will add one parameter was string title. We will add a list of item variables was screens. We will add four data items.
class Item {
const Item({required this.title,});
final String title;
}
const List<Item> screens = [
Item(title: 'Flower Pot',),
Item(title: 'Chair',),
Item(title: 'Wall Painting'),
Item(title: 'Table', ),
Item(title: 'Sofa',),
];
Create a new dart file called main.dart inside the lib folder.
In the main .dart file. We will create a new class ParallaxDemo(). In this class, we will define a late PageController variable as _pageController and late double _pageOffset.
late PageController _pageController;
late double _pageOffset;Now, we will create a dispose() method. in this method, we will add a variable of page Controller was _pageController.dispose().
@override
void dispose() {
_pageController.dispose();
super.dispose();
}
}In the body, we will add a Stack widgte. in this widget. We will add a DataImage() class. In this class, we will add pageCount is screens.length+1, screenSize and offset is _pageOffset. Also we wii add a PageView() method. In this method, we will add controller is _pageController. In children, we will add items.map() navigate a column widget.
Stack(
children: [
DataImage(
pageCount: items.length + 1,
screenSize: MediaQuery.of(context).size,
offset: _pageOffset,
),
PageView(
controller: _pageController,
children: [
...items
.map((item) => Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.all(10),
color: Colors.black.withOpacity(0.7),
child: Text(
item.title,
style: const TextStyle(
color: Colors.white,
fontSize: 30,
),
),
),
],
))
.toList(),
],
),
],
),In this widget, we will add Container with the padding, color and its child we will add item.tittle.
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:flutter_parallax_effect_page_view_demo/splash_screen.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) => MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(primarySwatch: Colors.blue),
home: const Splash(),
);
}
class ParallaxDemo extends StatefulWidget {
const ParallaxDemo({super.key});
@override
_ParallaxDemoState createState() => _ParallaxDemoState();
}
class _ParallaxDemoState extends State<ParallaxDemo> {
late PageController _pageController;
late double _pageOffset;
@override
void initState() {
super.initState();
_pageOffset = 0;
_pageController = PageController(initialPage: 0);
_pageController.addListener(
() => setState(() => _pageOffset = _pageController.page ?? 0),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: const Text("Flutter Parallax Effect with PageView Demo",style: TextStyle(fontSize: 18),),
backgroundColor: Colors.orange,
centerTitle: true,
),
body: Stack(
children: [
DataImage(
pageCount: items.length + 1,
screenSize: MediaQuery.of(context).size,
offset: _pageOffset,
),
PageView(
controller: _pageController,
children: [
...items
.map((item) => Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.all(10),
color: Colors.black.withOpacity(0.7),
child: Text(
item.title,
style: const TextStyle(
color: Colors.white,
fontSize: 30,
),
),
),
],
))
.toList(),
],
),
],
),
);
}
@override
void dispose() {
_pageController.dispose();
super.dispose();
}
}
class DataImage extends StatelessWidget {
const DataImage({
Key? key,
required this.pageCount,
required this.screenSize,
required this.offset,
}) : super(key: key);
final Size screenSize;
final int pageCount;
final double offset;
@override
Widget build(BuildContext context) {
int lastPageIdx = pageCount - 1;
int firstPageIdx = 0;
int alignmentMax = 1;
int alignmentMin = -1;
int pageRange = (lastPageIdx - firstPageIdx) - 1;
int alignmentRange = (alignmentMax - alignmentMin);
double alignment = (((offset - firstPageIdx) * alignmentRange) / pageRange) + alignmentMin;
return SizedBox(
height: screenSize.height,
width: screenSize.width,
child: Image(
image: const AssetImage('assets/images/living_room.jpg'),
alignment: Alignment(alignment, 0),
fit: BoxFit.fitHeight,
),
);
}
}
class Item {
const Item({required this.title,});
final String title;
}
const List<Item> items = [
Item(title: 'Flower Pot',),
Item(title: 'Chair',),
Item(title: 'Wall Painting'),
Item(title: 'Table', ),
Item(title: 'Sofa',),
];Conclusion:
In the article, I have explained the Parallax Effect With PageView in Flutter; you can modify this code according to your choice. This was a small introduction to the Parallax Effect With PageView In Flutter User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying Parallax Effect With PageView in your Flutter projects. We will show you what the Introduction is. Make a demo program for working on the Parallax Effect With PageView using the single background imge scrolling in your Flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I need to correct something? 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! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
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.
[…] In this article, we will explore the Parallax Effect With PageView In Flutter. We see how to execute a demo program. Using a single background image scrolling […]