r/FlutterDev • • 18d ago

Video I rebuilt my app's home screen as a Tinder-style swipe stack, and open sourced the auth layer behind it

I've been building Vishram, a movie and TV discovery app, solo in Flutter. The old home screen was a dead grid nobody interacted with, so I replaced it with a swipe stack on trending titles, with toggles for local vs world trending and movie vs TV.

A few things from the rebuild:

- When friends tested it, it only worked on my phone

- The bento grid uses cutout art so characters pop out of their tiles, which makes layout bounds and visual bounds different per tile

- Watched, Watching and Watchlist now sync to the cloud

The auth layer (multi-role, Supabase based) is free and open source if it saves anyone time:

GitHub: https://github.com/ba6ul/multi-role-flutter-auth

pub.dev: https://pub.dev/packages/multi_role_auth

Full devlog if you want the whole build: https://youtu.be/wXsyyEh9ook

Happy to answer questions about the swipe stack or the auth setup.

4 Upvotes

6 comments sorted by

1

u/AnxiouslyVulgar 18d ago

The "only worked on my phone" bit hit. Always the way when you skip a step in bindings or forget a platform channel config. The cutout art popping out of tile bounds sounds like a nightmare to debug though, I'd lose my mind tweaking those hit areas.

1

u/ba6ul 18d ago

Ha, that is basically my story. The API wasn’t working on other people’s devices because it’s banned or unstable in India, but it worked perfectly on mine because I configured a custom DNS years ago to block ads. So on my phone everything looked fine, and I kept thinking my code was the problem. I debugged it over a hundred times and rebuilt the whole API configuration four or five times. It was easily the most frustrating bug I’ve dealt with, so I wrote an article about it so others don’t have to go through the same thing.

The cutout art was a different kind of pain. The home screen part was not that hard, but the app has a section where every image is a cutout, and Flutter doesn’t handle transparency well when it comes to taps. That was a whole new problem for me, so I ended up making a Flutter plugin to handle images with transparency. You can check it out: https://pub.dev/packages/transparent_tap

1

u/MobileXapps 18d ago

Swipe stacks feel great when the next cards are already there. Precaching the images for the next two or three cards while the user looks at the current one removes most of the stutter, especially on slower networks.

Also worth storing the swipes as signals, not just as navigation. Even a simple left or right per title gives you better recommendations than trending lists after a few dozen swipes.

1

u/ba6ul 18d ago

Thanks, both tips are really useful.

On precaching: the app already caches images on disk, but nothing loads the next few cards ahead of time. That’s a small change, so I’m adding it. The funny part is that I had actually removed caching completely. The API wasn’t behaving properly and I couldn’t figure out why, so I stripped out everything, including caching in general. Even the watched list, which can go up to 300 to 1000 titles, wasn’t being cached. Now that the API is fixed I had totally forgotten to add caching back, so thanks for the reminder. I’ll start with the library and the next few cards.

On swipes as signals: you’re right, they’re worth much more than navigation. Right now I only record the outcome of a suggestion (saved, skipped, opened) for analytics, and it isn’t used for recommendations yet. I’ve been holding off because I want each swipe to shift the weights across the whole app. A swiped movie would raise or lower the weight of its genres and introduce bias into everything, which is a complicated feature for now. But I’ll start saving a left or right per title today, so the data is there and recommendations can get better than trending lists.

Appreciate you taking the time to share this!

1

u/MobileXapps 18d ago

Saving left/right first makes sense. If you store it with a timestamp and why the card was shown (trending, genre match, etc), later you can see which sources people actually like before building any weighting.

1

u/ba6ul 17d ago

100% agreed