'Flutter | How to add bouncing effect in the stacked cards
I have developed the stacked cards with the help of page view builder. The issue is whenever a user reaches the last card he should get the bouncing effect which will indicate that this is the last card and the same goes for first card as well. Below is my code:
import 'package:dgda/common_widgets/carousel/horizontal_carousel_attributes.dart';
import 'package:flutter/material.dart';
class HorizontalCarousel extends StatefulWidget {
final HorizontalCarouselAttributes attributes;
const HorizontalCarousel.builder({
Key? key,
required this.attributes,
}) : super(key: key);
@override
_StorySwiperState createState() => _StorySwiperState();
}
class _StorySwiperState extends State<HorizontalCarousel> {
PageController? _pageController;
double _pagePosition = 0;
List<Widget> widgetList = [];
@override
void initState() {
super.initState();
_pageController = PageController();
_pageController!.addListener(() {
setState(() {
_pagePosition = _pageController!.page!;
});
});
}
@override
Widget build(BuildContext context) {
return Stack(children: <Widget>[
_getPages(),
PageView.builder(
reverse: widget.attributes.direction,
physics: const BouncingScrollPhysics(),
controller: _pageController,
itemCount: widget.attributes.itemCount,
itemBuilder: (context, index) => GestureDetector(
key: Key('home_discover_now_$index'),
onTap: () {
widget.attributes.onTap(index);
},
),
),
]);
}
Widget _getPages() {
final List<Widget> pageList = [];
final int currentPageIndex = _pagePosition.floor();
final int lastPage = currentPageIndex + widget.attributes.visiblePageCount;
final double width = MediaQuery.of(context).size.width;
final double delta = _pagePosition - currentPageIndex;
double top = -widget.attributes.dy * delta + widget.attributes.verticalPadding;
double start = -widget.attributes.dx * delta + widget.attributes.paddingStart;
pageList.add(_getWidgetForValues(top, -width * delta + widget.attributes.paddingStart, currentPageIndex));
int i;
int rIndex = 1;
for (i = currentPageIndex + 1; i < lastPage; i++) {
start += widget.attributes.dx;
top += widget.attributes.dy;
if (i >= widget.attributes.itemCount!) continue;
pageList.add(_getWidgetForValues(top, start * _getDepthFactor(rIndex, delta), i));
rIndex++;
}
if (i < widget.attributes.itemCount!) {
start += widget.attributes.dx * delta;
top += widget.attributes.dy;
pageList.add(_getWidgetForValues(top, start * _getDepthFactor(rIndex, delta), i));
}
return Stack(children: pageList.reversed.toList());
}
double _getDepthFactor(int index, double delta) {
return (1 - widget.attributes.depthFactor * (index - delta) / widget.attributes.visiblePageCount);
}
Widget _getWidgetForValues(double top, double start, int index) {
Widget childWidget;
if (index < widgetList.length) {
childWidget = widgetList[index];
} else {
childWidget = widget.attributes.widgetBuilder(index);
widgetList.insert(index, childWidget);
}
return Positioned.directional(
top: top,
bottom: top,
start: start,
width: widget.attributes.itemWidth,
height: widget.attributes.itemHeight,
textDirection: widget.attributes.textDirection,
child: AspectRatio(
aspectRatio: widget.attributes.aspectRatio,
child: childWidget,
),
);
}
}
This is how the stacked cards looks like - https://drive.google.com/file/d/1o-mg-8aFTx8q5bIetza0gN5d3ZtH9QW9/view?usp=sharing
And this bouncing effect I need in my stacked cards widget - https://drive.google.com/file/d/1lEWEOmKl2d808-izoPakrCG99sA6od61/view?usp=sharing
I want to achieve the bouncing effect in the 1st video.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
