Create a Family Memories App in FlutterFlow | Essential Setup & UI Tutorial | Part 1 (2025 Guide)
HTML-код
- Опубликовано: 8 фев 2025
- Unlock the power of FlutterFlow and build an app that preserves cherished memories for generations! In this four-part series, we'll create 'Legacy,' an app that not only records memories but transcribes them, uses AI to organize them, and makes them searchable.
In this video, 'Part 1: The Ultimate FlutterFlow Setup Guide' focuses on laying the groundwork for your app. Whether you're a FlutterFlow beginner or a seasoned pro, this video will guide you through:
Planning your app's user journey: We'll map out the user flow, from login to exploring family eras and recording memories.
FlutterFlow project setup: Learn how to create a new project, connect to Firebase (or other databases like Supabase, Cloud SQL, or SQLite), and configure authentication and storage.
Firebase setup and considerations: We'll explore the benefits and costs associated with Firebase Storage and how to stay within free usage limits.
UI basics and customization: Define your app's colors, upload custom fonts, and build your login, eras, and entries pages.
Database schema design: Learn how to structure your data using an Entity Relationship Diagram (ERD) and set up your Firebase collections.
Dynamic content with Firestore queries: Display eras and questions dynamically using Firestore queries and page views.
Importing pre-built components: Save time by importing a toggle button library using FlutterFlow's new libraries feature.
By the end of this video, you'll have a solid foundation for your app, including a solid FlutterFlow project setup, a structured user experience, a functional UI, and a securely connected database.
--------------
Resources:
Download Knak from the App Store or Play Store and always have access to this project's resources:
iOS: apps.apple.com...
Android: play.google.co...
Clone the project so far in FlutterFlow: app.flutterflo...
Add the 'Toggle Button' library from Marketplace here: marketplace.fl...
--------------
Next Up:
Part 2 dives into audio recording and transcription, using custom code and backend APIs to turn speech into searchable text.
Don't forget to like, subscribe, and hit the bell icon to be notified when Part 2 drops!
Ready to try FlutterFlow for yourself? Start building your app today with a free trial 👉 www.flutterflo...
Follow us on Twitter 👉 / flutterflow
--------------
FlutterFlow is a visual development platform for building native apps, bringing design and development into one tool. With drag-and-drop functionality, you can build pixel-perfect UIs and easily connect your app to live data via Firebase or APIs. Plus, you can add advanced features like push notifications, payments, animations, and more. Whether you build your own custom widgets or write custom code, FlutterFlow makes it easy to bring your app ideas to life.
#FlutterFlow, #Firebase, #AppDevelopment, #NoCode, #LowCode, #FamilyHistory, #MobileApp, #Tutorial, #UI, #UX, #Database, #AI, #Algolia, #Flutter
Loving the consistency with tutorials! you guys are making it so much fun
Really appreciate that! Consistency is key, and knowing you’re having fun with the tutorials makes it all worth it. More great stuff coming soon! 🙌✨
Will switching to the new Flutter version on February 11 improve the initial entry page rendering in the browser?
Been struggling with Audio capture, came at a great time this! When’s part 2 out?
Glad this came at the right time for you! 🎯 Part 2 coming Monday 10th Feb-stay tuned! In the meantime, let us know if there’s anything specific you’d like covered. 🚀🎧
Don't forget to add revenue cat this time or stripe subscription
❤❤❤
Bro, you are a buildship youtuber right? what are you doing in flutterflow channel.... 😁😁😁
Haha, caught me! 😆 But hey, FlutterFlow is all about building and shipping too-just with a visual dev twist! 🚀 Excited to bring that same energy here!
@@FlutterFlow😊... Love your way of teaching and i have learnt a lot from you...
That’s the best compliment I could ask for! Truly appreciate it. More awesome content coming your way! 🚀😃
The eyes are scary :D
That’s just my trick to keep you watching… but you’re right, maybe I did crank the ‘soulless gaze’ setting up a little too high!
How to use ai in fkutterflow
in Part 4 of this video we'll use AI to generate detailed summaries for the content recorded in the app, as well as use it to make the content searchable and interactive... so I hope you'll come back for that!
In the meantime, you might want to check out my colleague John's excellent video on integrating Chat GPT into your FlutterFlow projects here: ruclips.net/video/DDjrG2h6fmk/видео.html
There's also a great demo of our AI page generator here: ruclips.net/video/RYgksWkeMmg/видео.html
@@FlutterFlow thanks much for sharing links
Wanted that advance algolia search tutorial so badly....the one you already have is really poorly explained
Well, let’s fix that, shall we? 🚀 What specifically do you think needs better explaining? I’d love to make the next one as clear and helpful as possible!
Deixa o áudio dublado em português
We always provide the full English captions (not auto-generated) so you will be able to do an auto-translation into Portuguese.
this video is build using ai
What?! I want those late nights back! 😆 If only AI could do all the hard work for me… but nope.