3-in-1 Flutter AI Masterclass: 15 Apps with Cursor & Figma

Install the flutter sdk on mac by downloading the mac zip for intel or m1/m2/m3, extract to a development folder, add flutter to the path, and verify with flutter version.

install Android Studio for Flutter development, download from the Android developer site, choose Intel or Apple Silicon, install SDK components, enable the Flutter plugin, restart, and start a Flutter project.

Install and open Xcode on macOS to build iOS apps with Flutter. Learn to configure Android Studio and select command line tools to enable iOS development.

Create a new Flutter project in Android Studio, choose platforms, set Kotlin for Android and Swift for iOS, then run the default counter app on iOS simulator and Android emulator.

Create an Android emulator in the device manager by selecting Pixel 7 and Android 14, download the version, finish setup, and install the starter app to run Flutter.

Download the flutter sdk from flutter.dev, unzip it, and place the flutter folder on the c drive, then configure the environment path to run flutter doctor globally.

Install android studio on windows to enable flutter development, install dot and flutter plugins, restart, and configure Android SDK command line tool and licenses so flutter doctor shows no errors.

Set up an Android virtual device in Android Studio to test flutter apps, using the virtual device manager to pick a device like Pixel 7 Pro and Android 14.

Create a flutter expense tracker using cursor ai, starting from an empty project in android studio to building, running on an emulator, and enabling create, edit, and delete expenses.

Learn to run a Flutter app with Cursor AI by launching Android emulators and iOS simulators outside Android Studio, installing the app, and troubleshooting common settings on Windows and Mac.

Define a detailed prompt to build a professional flutter expense tracker app with add, edit, and delete expenses. Include category support, a totals dashboard with charts, and a bottom navigation.

Fix errors in a Flutter expense tracker using Cursor AI by describing issues in plain language, and prepare to add a monthly budget feature in the next lecture.

Upgrade an expense tracker with a monthly budget feature using Cursor AI. Set, save, and visualize the budget with a progress bar and charts, and warn when expenses exceed.

Craft precise prompts for Cursor AI to generate the Smart Expense Tracker, detailing app name, functionality, bottom navigation with three tabs, and local data storage.

Learn how cursor ai preserves context while adding a monthly budget feature to an expense tracker, guided by a progress bar showing model token usage.

Learn to design stunning mobile apps with AI in Figma, a cloud-based design and prototyping tool you use in your browser, using the Make AI feature on the free plan.

Install the Figma desktop app for Windows or Mac, log in with Google, and launch to access the GUI and create a Figma Make project for mobile app UI design.

Design our first mobile calculator app with Figma AI, building an interactive prototype, previewing on mobile, refining design, managing versions, publishing a shareable prototype before converting to a mobile app.

Copy the design to clipboard, paste into a Figma file, adjust background and text, then build with Cursor AI in the next lecture.

Connect cursor with Figma to convert a Figma design into a functional app by enabling developer mode in Figma desktop and enabling MCP in both tools.

Create a Flutter calculator app by building a project, importing it into Cursor AI in agent mode, and iteratively run, test, and adjust the UI to match a Figma design.

Design a multi-screen notes app with Figma AI and cursor, switchable grid and list views, and separate create and edit screens, while refining the search bar for a mobile experience.

Create .fig files by turning home, list, and create node screens into a figma document, cropping layers, aligning heights, and implementing the design with cursor AI.

Build a multi-screen notes app in flutter using cursor ai, create the project, pass screens to cursor, and implement a home with list/grid, a color-picker editor, and cross-platform testing.

Test the notes app generated by Cursor in Flutter, run on an emulator, and validate create, edit, color changes, search, and delete while fine-tuning the user interface.

Create a Flutter weather app with Cursor AI that lets users search a city and view current weather, seven day forecast, temperature, humidity, wind speed, and a trend chart.

learn how an api enables two programs to communicate by making api calls to a weather platform to fetch and display city data.

Explore API call components: endpoint, parameter, header, and body, with HTTP methods get, post, port, and delete, and see how to fetch weather data or send user details.

Load weather data from the openweathermap API, manage the secret api key, parse JSON, and enable a navigation drawer with saved cities, seven-day forecast, and Celsius/Fahrenheit temperature settings.

Fix the overflow error in the forecast section's horizontal scroll list. Ensure tapping a saved city opens the home screen with that city's weather; install via flutter run in terminal.

Learn to replace default Flutter icons with custom icons via Cursor AI, placing images in an assets folder and using prompts to show weather conditions on Android and iOS.

design the graphical user interface of mobile apps using Figma and cursor, import the calculator app user interface from resources, and explore dark and light mode designs for cursor-based apps.

Connect cursor to Figma via the MCP server and enable desktop MCP, then create a Flutter project and build the calculator interface exactly like the Figma design.

Learn to implement dark and light mode UI in a Flutter app with Cursor, applying the Figma design, removing padding and blue circles, and adding a theme switch icon.

Design a modern AI meal planner app using a detailed prompt, onboarding, and AI-generated meal plans, implemented with Cursor AI and Figma for a futuristic mobile UI.

Create a new Figma file, copy and paste all sixteen screens from splash to signup, and convert the design into a dot fig file for Cursor AI.

Build an ai meal planner app in flutter, creating splash, login and onboarding screens, then home, meal detail, profile and preferences, using Cursor with Figma designs and local storage auth.

Create onboarding screens, fix signup overflow when the keyboard opens, and refine the onboarding flow with bottom dots and a matching gui; test changes and plan the meal planning feature.

Implement the meal planner and meal details screen from the Figma design, then build profile and preference screens, and generate the meal plan using chat GPT API.

Integrate the OpenAI api to send user data (weight, age, goals, dietary preferences) to a ChatGPT model and render the generated meal plan in the app.

Launch the flutter app in an iOS simulator on Mac, sign up, and verify the generated meal plan and details correctly show calories and protein.

Implement the profile and preferences screens using cursor per the figma design, and enable dashboard-to-profile navigation. Ensure the meal plan is saved locally to avoid regeneration on each load.

Save the AI-generated meal plan to local storage after onboarding and only regenerate when user preferences change, ensuring meals reflect the selected number of daily meals.

Implement logout on the profile, match the top background to the app bar, and fix login flow so onboarding and meal plan navigation occur correctly.

Generate a weekly meal plan for seven days, display day tabs on the home screen, show a progress screen while generating, store plans locally, and tailor meals to user preferences.

Learn how to replace a local database with Firebase in a Flutter app using Cursor AI, enabling signup, login, onboarding preferences, and meal plan synchronization across devices.

Connect your Flutter app to Firebase by creating a new project, adding Android and iOS apps, enabling email/password authentication, and configuring Firestore, with Google services files for iOS and Android.

Learn to set up firebase for flutter apps, configure iOS testing, and use firebase rules to enable authentication and firestore reads/writes, with debugging via cursor.

Test Android emulator deployment and use cursor to resolve issues, verify login with Firebase, sign up new accounts, and fetch meal plan data from Firebase.

Create a Flutter WhatsApp clone using Cursor AI, set up a new project via Command Prompt, and define login, chats, and real-time messaging with Firebase.

Create a Firebase project and attach Android and iOS apps to a Flutter app. Add Google Services JSON and plist files, update keys, and complete Firebase integration with Cursor AI.

Enable Firebase authentication, Firestore, and storage; configure email/password login, set Firestore and storage rules, and understand production and test modes and billing for profile images and image messages.

Learn to configure Firebase Firestore and Storage rules for testing and production, using relaxed rules during testing and secure rules in production to ensure app functionality.

Configure Firebase for a flutter app, enable authentication, Firestore, and storage, update rules, and test it using Android Studio with an emulator while resolving sign-up and login issues.

Resolve chat and text errors by updating Firestore rules, debugging user search and chat functionality, and testing across emulators to ensure the send button works and messages appear in chat.

Test the chat flow on two emulators (5554 and 5556) by running flutter, logging in as different users, and verifying instant message delivery.