Parallax Cards
A Flutter package for scrolling parallax effect and custom card overlays
Getting started
1. Depend on it
Add this to your package's pubspec.yaml file:
dependencies:
parallax_cards: ^1.0.1
2. Install it
Install it from the command line:
$ flutter pub get
3. Import it
Now in your project you can use:
import 'package:parallax_cards/parallax_cards.dart';
Usage
ParallaxCards is a Stateless Widget which you can include in your widget tree.
You can use it either vertically or horizontally by overriding the scrollDirection property:
Horizontal scroll view
ParallaxCards(
scrollDirection: Axis.horizontal,
imagesList: imagesList,
width: 250,
height: 350,
onTap: (index) {
log('$index pressed');
},
),
Vertical scroll view
You can customize the card overlays according to your preferences by overriding the overlays property.
However, ensure that the lengths of imageList and overlays are equal.
ParallaxCards(
imagesList: imagesList,
width: double.infinity,
height: 200,
onTap: (index) {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text("$index tapped"),
duration: const Duration(milliseconds: 500),
));
},
overlays: [
for (var title in titlesList)
Stack(
children: [
Positioned.fill(
child: DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.transparent,
Colors.black.withOpacity(0.8)
],
stops: const [0.5, 0.9],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
),
),
Positioned(
left: 16,
bottom: 12,
child: Text(
title,
style: const TextStyle(
fontSize: 22,
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
],
)
],
),
Additional information
Feel free to open an issue if you encounter any bugs or challenges. Pull requests are welcome!
