Want to create pageview overlapping effect? I tried replicating your sample, but I’m uncertain about your PreloadPageController (and maybe other details), so my sample might look glitchy. Additionally, I’m not wholly familiar with cropping widgets. But I bumped into this possible solution, all I did was wrap it with another ClipRect:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | @override Widget build(BuildContext context) { return LayoutBuilder(builder: (context, constraints) { final double padding = 20.0; var delta = widget.currentPage - widget.myPage; var start = padding * delta.abs() * 10; var top = padding + padding * max(-delta, 0.0); var bottom = padding + padding * max(-delta, 0.0); return ClipRect( child: Transform.translate( offset: Offset(-start, 0), child: Container( padding: EdgeInsets.only(top: top, bottom: bottom), child: ClipRRect( borderRadius: BorderRadius.circular(16.0), child: Container( color: redOrBlue(widget.myPage), ), ), ), ), ); }); } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
