Flutter Mastery: Building Dynamic Apps from scratch

Design the layouts for the to-do list app by composing Flutter widgets, using fake data to build interfaces, and prepare for database-driven data in upcoming sections.

Learn how to display dynamic lists in Flutter using ListView and ListView.builder, with item count, separators, and ListTile layouts including leading, title, subtitle, and trailing checkbox.

Create a Dart task class with nullable fields and a constructor; generate a dummy task list and display it in a to do list using a list view.

Build a task detail page in Flutter by navigating with Navigator and MaterialPageRoute to push a route, and display the task title, status, and description with update and delete buttons.

Learn to style text and elevated buttons in Flutter by applying text style, colors, and font weight, using ternary operators and border radii to reflect status changes.

Transform the task detail page into a stateful widget, implement a state class, and use setState to toggle task status, update the database, and refresh the status text and button.

Learn to build a dynamic Flutter to-do list using a checkbox to toggle task status, apply line-through when complete, and update items with setState and indexWhere.

Learn state management with callback functions by passing an update list item function from the to-do list page to the task detail page and invoking it on status changes.

Learn to display a confirm delete alert dialog in flutter using showDialog and a builder. The dialog shows a title, content, actions, and deletes the task with setState and Navigator.pop.

Explore flutter's navigator and root-based navigation, comparing imperative push with declarative push named routes, data passing, and back stack management across two example pages.

Add a floating action button to the to-do list screen to create a new task, wiring navigation to the add task form widget loaded from a new file.

Display a two-field form for adding tasks using a floating action button, with title validation, text editing controllers, and a submit button that prints inputs to the console.

Learn to display a snackbar using scaffold messenger in Flutter, showing the messages task added or failed to add the task on pressing a button during task insertion to database.

Add an edit button on the app bar of the task detail page to open a pre-filled edit task form with existing task data. Mirror the add task form.

Add a local database to the to do list app to store data now that the layouts are ready.

Learn to use SQLite as the local database to store, fetch, display, edit, and delete items in a Flutter app using the SQLite package.

Learn to integrate a local SQLite database in Flutter by installing the sqflite package, creating a tasks table, and inserting new tasks with async operations.

Learn to centralize database operations in Flutter by building a dedicated database helper class that handles opening connections, creating tables, and CRUD actions for tasks.

Replace direct insert logic with the database helper to add tasks, import and use the helper, remove unused imports, and await the row id from the helper.

Fetches all tasks from the local database and displays them in the user interface with FutureBuilder. Includes error handling and a loading indicator, enabling updates when new tasks are added.

Learn to auto update the task list when returning from the add task form using the future's then callback to fetch tasks and rebuild the user interface with setState.

Load task details from a local database by fetching the task via id using the database helper, then render with FutureBuilder, handling loading, errors, and updating task status.

Implement mark as complete and checkbox status updates in the database. Use maps to set status values and call the update task method.

Delete a task from the local database by tapping delete on the task detail page, using the database helper to delete by id, with async handling and a loader.

Update a task in a local database via the edit form, building a title and description map, using a database helper, async/await, and a loader.

Learn to move app data to a remote database by implementing authentication to link content to a specific user, then store data remotely and expose it via a Rest API.

Implement authentication in the app using Firebase authentication with email and password, enabling registration and login, create authentication layouts, and store auth data with shared preferences.

Create Flutter landing page for to-do list app using a PageView slider with three pages, each showing an image loaded from assets and a tagline, plus login and register actions.

Create a Flutter login page with a stateful widget, text fields (email, password), a submit button, and a link to registration, including form validation and a loading indicator during login.

Create a Flutter registration page with a form, text editing controllers, validators, and a loader. Use push and remove until to clean the navigator stack and keep the landing page.

Set up a Firebase project, create a real-time database, and obtain rest API endpoints for email/password signup and login, focusing on network calls from Flutter.

Learn to register users in flutter by posting to the Firebase Auth signup API with the http package, sending email, password, and returnsSecureToken as JSON.

Decode the server response and check the error field for registration errors in Flutter. Display a snack bar for errors, then switch on Firebase error codes and navigate on success.

Learn to store Firebase authentication data locally with shared preferences, check stored credentials on startup, and route users to landing or to do list pages in a Flutter app.

Implement a Firebase REST API login in Flutter by posting email and password, handling errors, storing user data in shared preferences, and navigating to the home screen.

Set up a left navigation drawer with a logout option and display the user's email from shared preferences. Clear all data on logout and navigate back to the landing page.

Implement authentication to support real users and real data, then store data in a remote database and make network calls to REST API endpoints for defined operations.

Explore storing data remotely and performing CRUD via REST APIs in a flutter app, comparing building your own backend with Firebase and using Realtime Database or Cloud Firestore.

Learn to add a task to Firebase Realtime Database via a rest api using http post to a task.json endpoint with json data. Explore managing multiple data sources.

Learn to manage data sources in Flutter by building a data source manager that coordinates SQLite local storage and Firebase Realtime Database, with an abstract data source and dedicated helpers.

Learn to implement remaining API calls for Flutter Firebase real-time database, including get tasks, get task, delete task, and update task using the HTTP package and data source manager.

Define a custom data source exception in dart, handle socket and data errors with try-catch across firebase data helper and widgets, including no data found, and show offline messages.

Develop robust local database error handling by wrapping SQLite operations in try-catch, using a data source exception with constant messages, and throwing or rethrowing when no data is found.

Learn to synchronize tasks across local SQLite and Firebase Realtime Database by creating unique IDs, using put requests, and updating both data sources with a transactional batch.

Master Flutter basics like network calls, layouts, and local storage with SQLite and SharedPreferences, plus authentication. Then learn state management using the provider package.

Learn how to manage Flutter app state with the provider package, compare the default stateful approach, and understand why provider is a simple option for beginners.

Learn how to manage app state more effectively by using the provider package to centralize changes with a change notifier and notify widgets through ChangeNotifierProvider and Consumer, instead of callbacks.

Use the provider package to create a change notifier, fetch tasks via data source manager, notify listeners, and supply a task list model to widgets via consumer.

Add and wire up task crud operations in the change notifier, including get task by id, add task, update task by id, and delete task. Notify listeners after changes.

Explore using provider and change notifier to update the UI in real time as tasks are added, edited, or deleted, sharing a task list model across screens.

Implement a provider-based change notifier to manage authentication, login, and shared preferences storage, with main.dart listening to auth state to load home or landing pages.

This lecture demonstrates managing authentication state in Flutter using Provider's ChangeNotifier with a user model, including sign up, login, and logout flows, shared preferences, and UI updates.

Develop advanced proficiency in flutter using provider, a skill many flutter job posts require. Move on to automated testing in flutter in the next section.

Master automated testing in Flutter by defining the expected behavior of functions, classes, and UI components via inputs and outputs, crucial for teams and large projects.

Learn to write unit tests in Flutter by testing a task model’s map output, using Flutter test, setting up dev dependencies, placing tests in test directory, and asserting each field.

Develop unit tests for the Firebase Data Helper add task function by using a mock HTTP client to simulate responses and verify error handling for socket and data source exceptions.

Master widget testing in flutter by loading widgets in a test environment, using flutter_test and widget tester to verify UI elements, navigation, and form validation with mocks.

Develop integration tests that validate the login flow across multiple widgets, from app launch to the do list page, including taps, text entry, and assertions.

Master automated testing in Flutter with unit tests, widget tests, and UI flow verification. Learn to add simple animations to a to-do list.

Learn how to add simple animations to Flutter widgets using built-in options. Apply these animations to components of a to-do list app, making the user interface more engaging.

Learn to use Flutter's animated container for implicit animations. Set a duration of 500 milliseconds and smoothly change a task item's color when completed.

Learn to use Flutter's animated switcher to seamlessly swap a checkbox with a loader in a to-do list, adding rotation and scale transitions for engaging UI.

Demonstrate implicitly animated widgets like animated container and animated switcher, and use tween animation builder to change an image height from 100 to 250 over 1000 ms via the builder.

Learn to animate text with AnimatedDefaultTextStyle after the landing page image animation, using a shouldAnimateText boolean in a stateful widget to switch from gray normal text to black bold text.

Learn to animate a login button in Flutter using AnimatedCrossFade to fade between the button and a loader, driven by a show loader boolean.

Master flutter animations fundamentals by animating containers, text, and widget transitions, then build a new app from scratch using Firebase with Cloud Firestore to develop a recipe app.

Build a recipe app from scratch in Flutter, using Cloud Firestore as the backend to add, read, update, and delete data and implement Google login via Firebase Authentication.

Build a Flutter recipe app with Firebase backend—Cloud Firestore, Firebase Storage, and Google login—featuring recipe listing, details, edits, and image uploads.

Learn to set up a Flutter project and connect it to a Firebase backend using FlutterFire plugins, including Cloud Firestore and Firebase Authentication, with step-by-step configuration and troubleshooting.

Learn how data is stored in Cloud Firestore by organizing into collections and documents, with fields like title, description, image URL, and arrays for ingredients and instructions.

Fetch and display a Firestore collection as a dynamic Flutter list, with recipe items shown as images and descriptions. Stream builder listens for real-time updates, keeping the UI in sync.

Learn how to fix multidex by editing the app level build.gradle when minSdk is below 21, addressing the 65,536 method limit with multidex and dependencies.

Create a recipe details page by passing the recipe from the list, then display the image, title, descriptions, and ingredients and instructions in a scrollable layout.

Develop a Flutter edit recipe page with an app bar edit button, opening a recipe edit screen to edit sections via popups and Firestore updates.

Build a dynamic edit recipe form in Flutter by using alert dialogs with pre-filled text fields, text editing controllers, and forms for editing ingredients and instructions.

Learn to update a Firestore document by obtaining the collection and document reference, building an update map from text fields, and handling success and errors with user interface feedback.

learn to add an item to a Firestore document's ingredients array using array union, update the user interface optimistically, and handle errors with a parent callback.

Implement a delete feature for a Firestore array by adding a delete icon, using a document reference update with array remove to remove the exact ingredient.

Edit a specific ingredient in a Firestore array by index and refresh the user interface after replacing the item. Update the document and handle errors with dialogs and immediate feedback.

Leverage flutter to add, delete, and update instructions in a recipe’s instruction array using Firebase Firestore, including document references, state updates, and a callback to refresh the recipe edit page.

Build a recipe image picker UI in Flutter Mastery, enabling gallery selection or camera capture, and set up the image block and state management for uploading to Firebase Storage.

Pick or capture images in a Flutter app and upload them to Firebase Storage with the Firebase Storage package, define references, enforce rules, and retrieve the download URL.

Learn to delete a recipe from Firestore in a Flutter app by tapping the delete icon, confirming via a dialog, showing a loader, and displaying a success or error message.

Add a recipe via a floating action button and a Firestore form. Validate inputs, upload an image, and save a recipe document with title, short description, and image URL.

Google login with Firebase authentication in Flutter by enabling Google provider, configuring sha-1 fingerprints, and building a login page with a loading state.

Learn to load the home page after successful authentication by listening to Firebase auth state changes with a stream builder, switching between login and home pages, and implementing logout.

Learn to attach the authenticated user's info to each recipe document in Firestore by saving a user map (email, name, image URL), and show owner-only edit and delete buttons.

Add a timestamp to each recipe document using server timestamp, then query the recipe list ordered by timestamp descending to show the newest items first and display posting times.

Parse the Firestore timestamp and display when each recipe was created on the list. Implement a timestamp field, convert it to date or time-ago, and format month names for readability.

Integrate Firebase with a Flutter app and use Cloud Firestore as the database. Learn how Firebase serves as backend-as-a-service for independent developers and organizations.

Learn to extend flutter from mobile to web by building a simple portfolio website from the same code base, and publish it for free on GitHub Pages.

Create a new Flutter project selecting web, run the terminal command to load the default counter app in Chrome, and prepare to modify the app.

Build the home page with a custom scaffold, app bar, and a left text column beside a right profile image, styled with padding, font size 40, amber, and shadows.

Demonstrates displaying social icons from assets, configuring pubspec.yaml, shaping profile images with clip and shadows, and building an app bar with navigation to work, education, and contact pages.

Define and implement named routes in a Flutter app using MaterialApp, pushNamed, and route functions to navigate between home, work, education, and contact pages, removing the back button.

Add custom fonts to a Flutter app by declaring font assets in pubspec.yaml, organizing them in assets/fonts, and applying font families to text widgets such as the app bar logo.

Publish your flutter web app by running flutter build web to generate the release, then host the build on GitHub pages via a public repository named username.github.io.

Discover how to create a simple website with Flutter, publish it for free, and use GitHub Pages to publish, whether you know JavaScript or not.