Add image support to Flutter web application with Supabase Storage | Flutter Figma Clone #4

Use Flutter's Custom Paint API and Supabase Storage to easily add image support to your application.
▶ supabase.com/docs/guides/storage
Uploading and downloading images is easy using Supabase Storage. We use the CustomPaint class of Flutter and Supabase Storage to have the user upload images that will be cropped in any shapes the users want and display them on the canvas. This video is episode 4 of the create a Figma clone using Flutter and Supabase series.
▶ Full code of the Figma clone app: github.com/dshukertjr/example...
Welcome to Episode 4 of our "Create a Figma Clone App Using Flutter and Supabase" series.
In today’s tutorial, Tyler is showing you how to integrate Supabase Storage to handle image uploads in our app, so our Figma clone can work with images just like the real application.
What you'll learn:
✅ Setting Up the UI: We'll show you how to set up a user interface for uploading images, adding a panel similar to Figma’s own.
✅ Image Upload Functionality: We'll show you how to upload images to Supabase Storage using the image picker plugin and configure the storage bucket directly from the Supabase dashboard.
✅ Handling Image Storage: Learn how to create and configure a storage bucket in Supabase, so you can set file size limits, and specify allowable MIME types to ensure that your app handles images securely without slowing your app down due to bloated file sizes - SUPER useful for devs.
✅ Integrating Uploaded Images into the App: Once an image is uploaded, see how to draw it onto the canvas within your Flutter app, using Flutter APIs to handle image rendering dynamically.
✅ Security Configurations: We'll show you how to set up row-level security policies for your storage bucket to protect your data and ensure that image uploads are handled securely, even in an open environment - your app is SAFE!
We'll show you the technical steps, but show you how to navigate a cloud environment using Supabase’s scalable storage solution safely.
Whether you’re enhancing your app’s functionality or building a complex design tool, these skills are invaluable for devs!
💻 Videos to watch next:
▶ Add live cursor sharing using Flutter and Supabase | Flutter Figma Clone #1 • Add live cursor sharin...
▶ Draw and sync canvas in real-time | Flutter Figma Clone #2 • Draw and sync canvas i...
▶ Track online users with Supabase Realtime Presence | Flutter Figma Clone #3 • Track online users wit...
👇 Learn more about Supabase 👇
🕸 Website: supabase.com/
🏁 Get started: app.supabase.com/
📄 Docs: supabase.com/docs
🔔 Subscribe for more tutorials and feature updates from Supabase: / @supabase
📱 Connect with Us:
🐙 Github: github.com/supabase
💬 Discord: discord.supabase.com/
🐦 Twitter: / supabase
📸 Instagram (follow for memes): / supabasecom
ABOUT SUPABASE:
Supabase is the open source Firebase alternative. Supabase provides a full Postgres database for every project with pgvector, backups, realtime, and more. Add and manage email and password, passwordless, OAuth, and mobile logins to your project through a suite of identity providers and APIs.
Build in a weekend, scale to millions.
#Supabase #AppDevelopment #RealtimeApps #DeveloperTools

[@dshukertjr]

I had so much fun through the Figma clone series. Would you like to see us build clones of other applications? Let us know in the comments what other clone apps you want us to build on RUclips 👇

[@flutterlord]

How about a scalable chat + feed app that solves the issue of handling massive message tables by simply expiring/deleting messages or feed posts over time.

[@atheer3343]

Can you do a video on stripe Connect integration in a flutter app with supabase there’s no resource on that. Thank you.

[@leodang00]

Fullstack Framer clone using Flutter + Supabase + Lemon Squeezy

[@GlennMarcusNYC]

Hi @dshukertjr
Awesome series. Learning a lot about supabase realtime (and Flutter which is an added bonus) from this series.
You mentioned episode #5 to cover persisting the canvas state to supabase. Any chance that is coming???

[@flutterlord]

Yet another banger- this helps a ton !!

[@Shreyas-fs3dp]

Please make video on how to implement google/apple signIn in compose multiplatform app

[@rtorcato]

Is it possible to setup Supabase to use R2 storage?

[@dshukertjr]

Bring your own storage might come some time in the future. Not sure if R2 will be on the list of supported providers, but keep your eyes open to the updates 👀