Flutter 2.0: Build Modern Responsive Web & Mobile Apps

Set up your Windows machine for Flutter web development by following a detailed PDF guide to install Android Studio and Visual Studio Code, configure environment variables, and run emulators.

Install Flutter on your Mac and set up Visual Studio Code with the provided setup PDF, then optionally install Android Studio and Xcode to build web apps.

Install essential VS Code extensions for Flutter development, including pubspec assist, format on save, error lenses, and bracket pair colorizer, to streamline web and mobile app coding.

Flutter 2.0 enables null safety automatically, altering code and preventing runtime errors. For starting with safety disabled in this course, downgrade the Flutter SDK to 2.11 or lower.

Create a flutter web portfolio app by bootstrapping a project in VS Code, run it in Chrome, and experience a background image, buttons, and a project list with hot reload.

Build a portfolio app bar in Flutter by placing a circular network image and a name side by side, with styling and zero elevation.

Create a contact me button in flutter using a text button with an icon, then apply a custom style for color, amber background, and a rounded pill shape.

Fine-tune the app bar and action buttons by wrapping in padding and adjusting edge insets for icon and text, and set the text color to black for a pill-like look.

refactor your Flutter app by extracting a reusable contact button as a separate widget, organizing screens and widgets folders, and parameterizing text, icon, and on pressed behavior.

Learn to assemble the web app body by organizing assets, declaring images in pubspec, and using a stack overlay on a background image to display a profile headshot and text.

Adjust and align the main body by increasing text size, applying alignment widgets, and using expanded layouts to fix overflow while adding a contact button for a responsive Flutter UI.

Position the button row at the bottom left of the Flutter screen with padding and align, then extract it to button_row.dart using asset icons and a hex-colored container.

Learn to build a dynamic my projects list in Flutter using a column, expanded list view, and cards with list tiles to display six items.

Finish the project list in flutter by aligning items, populating from a project list with title, subtitle, and image, then add padding, spacing, and clickable email and social links.

Learn to launch external websites and emails from flutter buttons using the url_launcher plugin, wiring Facebook, Instagram, and Twitter icons to their destinations.

Implement a mail to workflow in Flutter 2.0 using the mail to plugin to launch the email client with prefilled fields across Android, iOS, Linux, Mac OS, Web, and Windows.

Build a book tracker web app in Flutter 2.0 while learning to pause and reflect on concepts, not just code along, creating a full fledged app.

Set up a Flutter project, create a get started page, and assemble a simple home screen with a circle avatar, title, and action button, applying basic theme and layout tweaks.

Finish the get started page in Flutter 2.0 by applying a hex color plugin for colors, styling a text button with an icon, and refactoring into screens/get_started_page.dart.

Hook up the login flow from the get started page to a login screen, enable create account via firebase, and build a stateful login page with a material page route.

Toggle create and login logic uses a boolean state in a stateful widget to switch between create account and login forms with setState and a ternary operator.

Learn to build a Flutter login form by using a global form key, email and password text fields, and simple vertical layout.

Finish the login page interface in Flutter by decorating email and password fields with input decoration, adding label and hint text, obscuring password, and refactoring into a login form widget.

Validate a login form in Flutter by applying validators to text form fields and using a form key to trigger currentState.validate on submit.

Build a Flutter 2.0 login and create account flow by refactoring into separate pages. Implement create account form with email validation and reactive UI that switches views on state.

Continue building a full-fledged web app for managing books, including adding, marking read status, and notes, with sign-in and per-user accounts powered by Firebase Auth and Firestore.

Authenticate users with FirebaseAuth and save scalable book data with Firestore, enabling email-based sign up, sign in, and sign out for the app.

Learn to set up a Firebase project for a Flutter web app, add Firebase Core, Auth, and Firestore dependencies, configure index.html, and run with Flutter run on Chrome.

Enable authentication in the Firebase console for email and password, then test sign-in by creating a test user and signing in to obtain the user credential UID.

Demonstrates creating a user account on the web app with Firebase auth, using email and password, validating the form, then signing in and navigating to main screen showing hello world.

Learn to build a Flutter 2.0 app with Firebase authentication and a Cloud Firestore backend, using StreamBuilder to display real-time book data from a books collection.

Learn to extract a field from a snapshot by mapping a map, access the author field, and prepare for mapping into a data class for easier object handling in Flutter.

Learn how to redirect signed-in users to the main screen by checking Firebase current user and conditionally loading the main or login page with a simple widget.

Build a Dart book model in Flutter 2.0, with a from document constructor, and map Firestore snapshots to a list of book objects for easy access to author and notes.

Learn to create a Firebase auth user and a linked Firestore user record, mapping UID to a profile with avatar, display name, profession, and a quote for login flow.

Create a users collection in Cloud Firestore and link it to Firebase authentication by deriving a display name from the email, saving user data with UID after account creation.

Refactor Flutter app to use a user service, add an app bar with a circle avatar and sign‑out action, and fetch the user from users collection via a stream builder.

Filter the user list from firestore, map documents to a local user model, and display the current user's name and avatar in the app bar in Flutter 2.0.

Display a user avatar by using the current user's image or a fallback, handle nulls, and fix web image rendering by switching Flutter web to the web email renderer.

Tap the circle avatar to open a dialog for creating or editing a user profile, including avatar, display name, profession, and quote, with input fields for editing.

Learn to build a centered Flutter user profile by aligning name and profession with main axis alignment, handling overflow, and styling a bordered, scrollable quote area.

Refine the user quotes UI by adding padding and center alignment, render quotes with escaping, and wire an alert dialog to view or update user info with cancel option.

Implement an editable profile form in Flutter by showing an alert dialog that prepopulates name, profession, favorite quote, and avatar, enabling update or cancel actions.

Populate text fields with the current user data via controllers and refactor into a create profile dialog widget, using an alert dialog for update and cancel actions.

Refactor the alert dialog in the create profile flow, extract it to update the user profile, and ensure the current user is passed as a parameter.

Update a user in firestore by passing the document id and converting the user object to a map with toMap, enabling selective updates to minimize writes.

Compare the database object with current text fields to identify changes. Change detection triggers setting an update flag and updating the user, then close the popup.

Enable Firebase authentication and fetch books via search with the Google Book API. Show book details, save to a reading list, and establish the main page structure.

In Flutter 2.0, add a floating action button to open a book search page and implement a responsive text field with a text editing controller using media query.

Explore how to fetch and list books from the Google Books API, either with an API key for authenticated requests or without one, and construct queries to retrieve volumes.

Parse the book api json and fetch books from a remote api using http, async, and get; decode the json, iterate items, and extract book titles from volume info.

Refactor the book search user interface into its own class, define a book model with core fields, and implement fetchBooks to return a safe, populated list from payload data.

Refactor the fetchBooks function to handle futures and errors, convert results into a list of books, and print authors while debugging the api fetch flow.

Fetch books on search and display them in a horizontally scrolling list of cards with image, title, and author, using a stateful widget to show no books found when empty.

Learn to build a book card widget in Flutter 2.0 by constructing a horizontal card list with images and text, using a createBookCards method and overflow handling.

Build a clickable book card that opens a details alert dialog with an image, title, category, author, page count, and publisher, using showDialog and a column layout.

Build a book detail dialog in Flutter with an expanded layout, scrollable description, and a bordered container. Include save and cancel actions as text buttons.

Learn to save books to Firestore by creating a collection reference and mapping book data, including user ID, to Firestore. Refactor the search dialog into a separate widget.

Explore the flutter 2.0 main page structure and reading list. See how firestorm differentiates reading list items from currently reading and how cards open to rate books and add notes.

Learn to assemble a responsive Flutter UI by composing a scaffolded layout with containers, columns, and rich text using TextSpan and styling, including bold and headline themes for clear labeling.

Implement a horizontal, live updating reading now list in Flutter using a Firestore stream, stream builder, and a card-based list of dummy items to display book data.

Build a reading list card widget in Flutter, featuring image, title, author, and details inside a styled container. Leverage Stack and Positioned widgets to arrange layout and shadows.

Build a reading list card in Flutter by adding an image and title with a stack and positioned widgets, plus a two-line rich text title and author.

Learn to build a reading card in Flutter 2.0 with a two-sided rounded button, applying padding, alignment, and gesture detector interactions to create polished cosmetic fixes.

Create a Flutter book rating widget that accepts a score, uses a box decoration with padding and shadow, and displays a star icon with a score label.

Pull the current user's books from the database, filter by user id, map documents to book objects, and stream updates to the UI with a list.

Learn to build reading list cards in Flutter 2.0, style titles with padding, create horizontal lists with a stream builder, and implement user-specific filtering and authentication considerations.

Filter books to show only those whose user id matches the current signed-in user, using a where clause with Firebase in a Flutter 2.0 app.

Make the book card respond to taps in Flutter 2.0, opening a details dialog with the book’s image and info, and begin building a form to repopulate fields.

Construct a scrollable form inside the details alert dialog with fields for book title, author, book cover, and notes, and add update and delete actions spaced in a row.

Refactor the Flutter book details dialog by extracting a widget and using text editing controllers to populate fields from the book object, including start reading and mark as read actions.

Learn how to implement a start reading button that toggles between start reading and started reading, updates a reading timestamp, and stores it in the database using a stateful widget.

Update a book with Firebase timestamps to track started_reading and finished_reading by adding fields and updating via the document id from the widget.

Capture the started reading timestamp from the database and update the UI to show started on a formatted date. Format the timestamp using an intl date format utility.

Capture and display timestamps when users start reading, mark as read, or finish reading, showing read on or finished on dates to preserve data integrity, then close the update screen.

Integrate the Flutter rating bar from pub.dev, set initial rating 4.5 with five items, handle updates, and save and read the book rating from Firestore.

Retrieve the saved rating from the book object and display it on the main card, with a null check and support for half ratings via click or drag.

Implement the delete functionality for a book, showing a confirmation dialog "Are you sure?". Delete the document from the book collection upon confirmation, then return to the main screen.

Develop a Flutter book library app with a list and details page, enabling add, update, delete, and mark-as-read actions alongside a simple reading bar.