Flutter Carousel Slider
ArchivedApril 1, 2019
A fork of the Flutter Carousel Slider package — an attempt to fix something in the infinite scroll behavior that I never quite landed. Ironic, given that the infinite slider became the primary design element of the entire Potatuhs brand. A deep look at how infinite carousels actually work, how infinite feeds like TikTok are built, and what both do to our nervous systems.
Purpose
Forked the Flutter Carousel Slider to try to fix an edge case in its infinite scroll behavior. The fix never shipped. But the irony is rich: years later, the infinite carousel became the signature visual motif of the Potatuhs brand — an endlessly scrolling ribbon of potatoes that defines the entire design language. Sometimes the things you cannot fix become the things you cannot stop building.
Stack
What I Learned
- An infinite carousel is an illusion. You do not have infinite items — you have a finite list rendered in a way that wraps seamlessly. The standard technique: duplicate the first few items at the end and the last few at the beginning of the list. When the user scrolls past the last real item and hits a duplicate, you silently jump the scroll position back to the corresponding real item. Done correctly, the user perceives no seam. Done incorrectly, you get a flicker or a stutter that breaks the spell.
- The math behind smooth infinite scroll requires modular arithmetic on the item index (currentIndex % itemCount), careful management of the scroll controller to snap to positions without triggering scroll-end callbacks, and animation curves that mask the teleport when wrapping. The tricky part is not the forward direction — it is reverse scrolling, where the jump has to be pixel-perfect or the user feels it.
- PageView in Flutter with a very large itemCount (like 10000) is the lazy approach to "infinite" scrolling — technically finite but practically inexhaustible. Real infinite scroll clones items and manages position. The choice depends on whether you need true wrapping or just "long enough that nobody reaches the end."
- Carousel performance depends on viewport recycling — only rendering the visible items plus a small buffer, and disposing of items that scroll out of view. Without recycling, a carousel with heavy images or animations will eat memory until the app crashes. Flutter's ListView.builder handles this natively, but custom carousels often break it accidentally.
Key Insights
- The fact that the infinite slider became the Potatuhs brand's signature design element after I failed to fix one in open source is genuinely funny. The design system's hero component — an endlessly scrolling ribbon of potato products — is philosophically descended from a bug I never resolved in a Flutter package. Sometimes your obsessions reveal themselves through what you keep coming back to, not what you successfully complete.
- TikTok's infinite feed is technically a paginated API with seamless preloading. The client fetches a batch of videos (say, 10), begins preloading the next batch when the user reaches video 7 or 8, and stitches them together so the scroll never hits a loading state. The server-side is a recommendation engine that ranks candidates by predicted watch time, engagement probability, and diversity constraints. The "infinite" feeling is an engineering achievement: coordinated prefetching, adaptive bitrate streaming, and recommendation latency under 100ms. There is no bottom because the system is always computing what comes next before you get there.
- Vine worked differently — it was a chronological feed with a fixed content length (6 seconds), which created a natural rhythm. TikTok removed both constraints (algorithmic, variable length) and discovered that the human nervous system has no natural stopping cue when content is variable, personalized, and pre-buffered. The infinite scroll exploits a cognitive bias called "unit bias" — the tendency to consume one complete unit of something. When there is no unit boundary (no page break, no episode end, no feed bottom), the brain never receives the "done" signal. You keep scrolling because the system never tells you to stop.
- This is not neutral. Infinite scroll triggers a dopamine feedback loop: swipe, novelty, micro-reward, swipe again. The variable reward schedule (some videos are great, most are okay, you never know which is next) is the same mechanism that makes slot machines addictive. As someone building an infinite carousel into a brand, this is worth sitting with. The design pattern is powerful. The question is whether you use it to delight or to trap. The Potatuhs carousel is finite content in an infinite wrapper — you see everything, then it loops. TikTok is infinite content with no loop and no floor. The difference matters.
This post was composed through a conversation between Brett Owers and Claude Code (Anthropic). The content reflects Brett's recollection of each project and the lessons drawn from it. Some details may be approximate or omitted — the purpose is to paint an honest picture of a software engineer's development over time, not to serve as a precise historical record.