
Learn how Flutter builds mobile apps from widgets, inspired by React, with a declarative, reactive UI that rebuilds on state changes, and compiles to native code using the Dart language.
Download and unzip the course source code, open the project in Android Studio or Visual Studio, and use the lecture number branch to checkout the video code.
Install Flutter by downloading the Flutter SDK, unzipping it, moving the folder to a chosen location, navigating to its bin, and running flutter doctor to verify dependencies.
Define the main function as the Flutter app entry point and call runApp with a stateless widget, using material.dart for material design components and a build method returning a container.
Wrap a container in a material app and scaffold to create a basic Flutter UI with material design. Add a text widget inside and set directionality to left-to-right.
Learn how override annotations in Dart signal a superclass method, and explore build context as the location of a widget in the Flutter widget tree, enabling ui updates.
Explore how the scaffold widget inside material enables access to common features, including app bar, body content, floating action button, drawer, bottom navigation, and bottom sheet.
Build an iOS-style reminders app in Flutter, with a home screen showing reminder summaries, a detail screen for new reminders, and a lists feature with swipe-to-delete and edit for reorder.
Set up a navigator in a Flutter app using MaterialApp’s built-in navigator and initialRoute, define the forward slash route, and create a home screen as a stateless widget.
Learn to build a Flutter home screen with a scaffold and an app bar, adding an edit text button and styling it via theme data for a black dark theme.
In Flutter, enable a dark theme by setting the brightness property to dark, yielding a black background and white text. Tweak container and header colors for a cohesive dark mode.
Explore Flutter layouts with column widgets, stacking text widgets vertically, and control vertical alignment using main axis alignment options (center, space evenly) and cross axis alignment.
Learn how rows and columns control layout in flutter, visualize widget boundaries with the flutter inspector and debug paint, and grasp constraints, alignment, and overflow in parent-child widgets.
Learn how to use the expanded widget to allocate space in a two-part home screen layout, with two orange and dark blue containers and bottom action buttons.
Learn to lay out a bottom orange container with two buttons, left and right, in a row with edge insets for padding, and add an icon to the text button.
Explore how to build responsive grids in Flutter using GridView.count to create two-column layouts, with spacing, padding, and aspect ratio, and learn when to use GridView.builder for large lists.
Explore applying a rounded border radius to grid items using box decoration and border radius, and learn three color approaches in Flutter: Material colors, Cupertino colors, and custom hex.
Define a category model and render a typed category list on the home screen. Map categories to containers with icons and names, and show reminder counts using padding and alignment.
This lecture explains final and const in Dart, showing that final variables can be set once, while const values must be initialized and are compile-time constants, with list examples.
Create a reusable stateless category icon widget that takes a color and icon data to render a rounded background with a consistent icon style across the app.
Refactor the app by extracting the category grid and footer into separate widgets, introducing a category collection model, and organizing files into a home folder.
Learn how to convert a stateless widget to a stateful widget to toggle grid and list views, use setState to update layout, and implement edit and done controls.
Create a stateful list view in a Flutter project by importing material, defining list view items, and mapping a category collection to ListView's children using the default constructor.
Learn to style a Flutter list with ListTile, using leading and trailing icons, a title, spacing via SizedBox, and tile color theming.
Learn to implement drag-and-drop list reordering in Flutter using the auditable list view. Assign unique keys to items and handle onReorder to update and test item order with state management.
Make the private categories list in the category collection and expose it via an unmodifiable list getter, then provide remove and insert methods to safely modify items.
Toggle the checkbox on list item tap with a toggleCheckbox method in the category class, updating isChecked, color, and icon, then filter the grid by selected categories.
Animate between grid view and list view using Flutter's AnimatedCrossFade, controlling duration and crossfade state to switch views, while solving height constraints with a fixed height and sized box.
Refactor the app by creating category models and a widgets folder, add ad lib screen, and implement a modal add list with MaterialPageRoute and a full screen dialog.
Set up Flutter error screen interface with an app bar, icon container, and list name text field; implement color and icon selectors that update the display and enable keyboard scrolling.
Develop a custom color model with id, color, and isSelected to manage selectable colors, with material or cupertino color options, and store color ids in the database.
Define a custom color collection model to manage a private color list, then display them in a wrap of rounded 50 by 50 containers using a for-in loop and spacing.
Create a custom icon model and collection in a Flutter project, with a required constructor, icon data, and a by-id access method, preparing icons to become clickable.
Users learn to make a Flutter container selectable by tapping colors and icons using a gesture detector, updating selected color and icon and showing borders to indicate choice.
Retrieve user input from a text field with a text editing controller, update the add button color based on text presence, and clear the field with a suffix icon button.
Create a reusable text button theme to style all buttons consistently, set a blue accent primary color and font weight, and apply a headline style to category names.
Fix the addList screen by wrapping its column in a single child scroll view, removing extra padding, and applying edge insets start 20 to reveal data hidden by the keyboard.
Create an add reminder screen in Flutter with a full-screen dialog, featuring title and notes fields, a divider, a category selector, and a save action in the app bar.
Implement a tappable list tile with a category icon and trailing arrow, wrap in a container for a rounded card with ripple, enabling list and category selection.
Create two text editing controllers for title and notes, connect them to fields with sentence capitalization, listen to update title, and save to the database when the title is non-empty.
Explore lifting state up in Flutter by passing a to-do list through parent callbacks, building a shared data model, and adopting provider for centralized state with Firebase.
Discover how the provider package wraps the inherited widget to supply data across a Flutter app and enables consumption by child widgets.
Learn to set up a Flutter provider to expose a to-do list collection, implement add and remove methods, initialize a default list, and consume it in the home screen.
Develop a swipe-to-delete list in Flutter using the Dismissible widget. Manage lists with Provider and Firebase integration, and apply card styling, icons, and dynamic updates.
Fixes the homescreen scroll by disabling independent scrolling for the grid view items and to-do list, then wrapping the list view in an expanded widget to scroll together.
Select iOS, copy the bundle identifier from the runner.xcworkspace, register the app to get the GoogleService-Info.plist and configure firebase core, authentication, and cloud firestore in pubspec.yaml.
Register your Android app with Firebase, download the config file into the Android app folder, and update build files with plugins, multiDex, and the Firebase dependency per FlutterFire docs.
Learn to initialize Firebase in a Flutter app by configuring WidgetsFlutterBinding, calling Firebase.initializeApp with futures, and handling loading and errors via then or await with try-catch.
Learn how futures enable asynchronous programming by comparing synchronous and asynchronous code, using async/await to wait for server-like delays, handle results, and catch errors.
Leverage the FutureBuilder widget to initialize Firebase asynchronously, replacing manual state checks with a future-driven builder and snapshot states, including loading and error handling.
Learn how to implement an authentication flow in Flutter with Firebase, including a reusable authenticate screen that toggles between sign in and sign up with stateful widgets and callbacks.
Improve the sign up and sign in user interface by using AnimatedSwitcher with a 300 ms duration to smooth transitions, add stadium borders to elevated buttons, and stretch form controls.
Enable email and password authentication in the Firebase console, then implement a modular AuthService with a sign up method that creates a user via Firebase Auth and handles errors.
Keep users signed in with Firebase authentication, implement a sign-out button, and use a stream and a stream builder to monitor authentication state changes and navigate users accordingly.
Learn how to use a stream provider to pass the current user through a Flutter app, reacting to sign in and sign out to show home or authenticate screens.
Create a Firestore structure for authenticated users using a root users collection keyed by UID. Add subcollections, reminders and to do lists, each with documents that store dates and IDs.
Persist a new to-do list in Firebase Firestorm using provider to access the current user, creating a user document and to-do lists subcollection with an async set.
Create and serialize a to do list model to json, add a reminder count, and implement a named constructor fromJson to read data from Firebase, then upload via toJson.
Retrieve the user's to-do list from Firebase via a real-time stream, map documents to the to-do list model, and supply the stream through a stream provider for UI updates.
retrieve the to-do list from the database, access the user's to-do list by id in the Firebase database, and delete it asynchronously with error handling.
Learn to implement a reminder model in Flutter with Firebase by building a reminder class, handling fromJson and toJson, and enabling ad reminders once a to-do list exists.
Build a Flutter select reminder category screen using a full screen dialog, with a selected category callback, updating the list, checkmarks, and icons for each choice.
Use the multi provider to read reminders from a Firebase stream and expose both to-do lists and reminders across categories, converting snapshots to models and updating counts.
Learn to view reminders by category in Flutter using Provider state management, building a clickable category grid with InkWell ripples, and navigate to a dedicated category screen showing relevant reminders.
Build a Flutter view screen to show reminders for a selected to-do list using Provider, filter reminders by to-do list id, and enable tapping items to navigate to the view.
Display reminder details in a Flutter app by showing the title, optional notes, and due date and time formatted from milliseconds since epoch, using a helper for date and time.
implement delete on a to-do list by removing its reminders first via a Firestore batch, querying reminders with the current list id, then deleting the list itself.
learn to delete only reminders using a dismissible widget, update Firebase Firestore data with batch operations, and verify changes across to-do lists and categories.
Refactor the reminders app by extracting database interactions into a firebase firestore database service, providing to-do list and reminder streams and adding add and delete methods for lists and reminders.
Learn to delete a todo list via the database service, refactor to use user refs, and add a reminder method with error handling.
Implement delete reminder across screens by extracting a hit delete reminder method, calling database service with user uid, and handling errors with snack bars via a reusable helper.
Create a custom theme file with ChangeNotifier to toggle between dark and light themes, set theme data and colors, and update the app via a provider-based toggle button.
Most beginner courses only teach you the individual parts of a framework but don't cover how they all come together to create a real-world application.
In this comprehensive yet concise 7 hour course, we will together build one complete real-world flutter app from scratch while learning the framework and the dart language.
Some of the main things that we will learn in this course:
1. The complete basics of flutter and dart to build a strong foundation.
2. Build out the complete layout of the app - the iOS reminders app.
3. Add Navigation to our App - learn how to navigate between different screens and pass data.
4. Add Email Authentication to the App using Firebase Auth.
4. We'll also learn how to structure our code and learn how to model our data using classes in dart.
5. Use the Firebase Firestore as a Realtime Database for our app.
6. Manage app-wide state using the Provider Package(recommended by Google).
7. Create a Custom light and dark theme of the app that the user can toggle between.
The code for every video is provided in the GitHub repo attached along with the course.
By the end of this course, you will be an Intermediate Flutter Developer.