Flutter Masterclass (from Novice to Ninja)

Create a new Flutter RPG character app, learn theming, user input, global state management, data modeling, and database integration across multiple screens with animations and saves.

Develop a custom Flutter theme by defining an app colors class and a seeded color scheme. Apply the theme to MaterialApp to style the scaffold, app bar, and buttons.

Customize default text styles by defining a text theme with body medium, headline medium, and title medium, using app colors, font sizes, and letter spacing; apply via theme for widgets.

Create reusable styled text widgets in Flutter by centralizing body, heading, and title styles in a shared folder, using styled text, heading, and title with text theme and uppercase formatting.

Discover how to add custom fonts to a Flutter project with the Google Fonts package. Install, import, and apply fonts to text widgets and the app bar using Google Fonts.

Design a reusable styled button in Flutter by wrapping a gradient container inside a button, exposing onPressed and child, and placing the widget in a shared file for clean code.

Learn to display a dynamic list with ListView.builder, using an expanded, scrollable list of character names (Mario, Luigi, Peach, Toad, Bowser, Koopa) constrained by layout, padding, and margins.

Replace the home screen container with a reusable character_card widget (in character_card.dart) that uses a built-in card for each character, with padding and text, and theme-driven styling for consistency.

Add an icon button to each character card to navigate to a detail screen, using onPressed and the arrow_forward icon, with the arrow pushed right by an expanded widget.

Build a character model with a unique id, name, slogan, and a toggleable is-fave flag, plus an enhanced vocation enum and skills set, and a stats mixin.

Explore using a Dart mixin to add health, attack, defense, and skill stats to a character, with increase and decrease methods driven by a points system and minimum values.

Learn to encapsulate character stats by using private fields and exposing safe access through getters, including points, a stats map, and a formatted list for UI output.

Explore using an enhanced Dart enum to attach description, image, weapon, and ability to each vocation (algo wizard, code junkie, terminal trader, UX ninja) for a Flutter character model.

Create a skill class and a hard-coded, vocation-specific skill list in Dart, stored in a set to manage a character's single active skill with future-proofing options.

Create an assets folder structure for images in your Flutter project, including img/vocations and img/skills, and add these assets to pubspec.yaml for automatic loading.

Create and display a list of dummy character data on the home screen by defining a character model with id, name, slogan, vocation, and related stats.

Convert the home screen to use character objects from the model. Display each character’s image, name, and vocation with left-aligned text.

Add a create screen in Flutter by building a scaffold with an app bar, then design a form for name, slogan, and vocation selection to add characters to dummy data.

Add and style character name and slogan text fields in Flutter using input decoration, prefix icons, and labeled hints, then unify styling via a global text field theme and typography.

Learn to track user input with text editing controllers for two text fields, dispose them in the dispose method, and prepare values for creating a character object.

Design a submit handler that reads text from name and slogan controllers, validates non-empty inputs, prints values for debugging, and guides toward creating a new character in the next lesson.

Create a reusable vocation card widget in flutter to let users choose among four vocations—raider, junkie, wizard, and ninja—by tapping cards that display an image, name, and description.

Wrap the entire column in a single child scroll view to keep content within the screen boundaries and enable scrolling when it overflows.

Wrap each vocation card in a gesture detector to handle on tap events. Update the parent create screen state to store the selected vocation for submission.

Manage vocation selection in a Flutter create screen by updating state with setState, using on tap handlers, and a selected boolean to highlight the chosen vocation for character creation.

Generate a new character on submit by importing the Uuid package and using Uuid.v4 to create a unique ID, then add the character to the in-memory characters list. Navigate back to the home screen to see the new character, while noting the data remains in memory and will persist later with a database.

Explore Flutter forms, focusing on the form widget and other widgets to enhance form fields. Build on text inputs and a custom vocation card with a gesture detector.

Learn Flutter routing with the navigator by pushing and popping screens, passing data, and handling dialogs, toasts, and profile layouts. Understand when to push versus replace on the history stack.

Navigate between the home and create screens using the Flutter Navigator. Push new routes with a MaterialPageRoute and a context, then use the back button to return.

Show how to create a Flutter pop up dialog with showDialog and AlertDialog to validate empty character name or slogan, then close with navigator.pop.

Apply a dialog theme in flutter by setting a background color and transparent surface tint, then apply these properties globally through the app theme for all dialogs.

Navigate to a profile screen from the character card arrow using navigator push and a material page route. Build the profile screen with a scaffold, app bar, and scrollable body.

navigate from the home screen to a character profile by passing the selected character as an argument, enabling dynamic display of name, vocation, and description.

Continue fleshing out the profile screen by displaying the character name, vocation image, title, and description, then render the weapon, ability, and slogan with padding and a centered code icon.

Create a stateful StatsTable widget in Flutter to output a character's stats from a list, passing the character as an argument, and show a points indicator colored yellow or gray.

learn to build a flutter table to display health, attack, defense, and skill with name, value, and up/down buttons, mapping stats to rows and updating via setState.

Output a vocation-specific skills row on the profile screen by filtering skills to the character's vocation, rendering interactive skill icons, and enabling one active skill via a skill list widget.

Select an active skill for a character, manage the selection in state, highlight it with a yellow border on tap, and show the selected skill name.

Add a bottom save button on the profile screen and display a snack bar using scaffold messenger to confirm saves, with a 2-second duration and an optional close icon.

Explore why global state matters in Flutter apps, showing how fetching data once in a central place improves performance and prepares for database integration.

Explore managing global state with the provider package, install it from Pub.dev, and create a data store named character_store.dart under lib/services to supply and update the character list across widgets.

Create a character store class that extends ChangeNotifier to hold global character data, using a private underscore list with a getter, initialized with dummy data.

Provide the global character store to manage state with the provider package, and consume it in the home screen using a consumer, replacing dummy data with value.characters from the store.

Add a new character via the create screen by updating a change notifier based character store with provider, call add character, and notify listeners to refresh the home screen.

Hook your Flutter app to a database to persist character data across restarts, using futures and network requests in Dart, with guidance on the Firebase SDK setup.

Learn to create a Firebase project and connect a Flutter app to a Firestore backend by installing the Firebase and Flutter Fire CLI tools, core package, and initializing Firebase in main.dart.

Create a new Firestore database, connect it to your Flutter app in Europe, start in test mode, and install cloud_firestore with FlutterFire for a characters collection, noting production security rules.

Introduce factory constructors to deserialize Firestore data into character objects and serialize characters into maps for storage. Demonstrate converting JSON placeholder data into character objects and serializing vocation.

Convert a character object into a Firestore map with name, slogan, _is_fave, vocation as a string, skill IDs, stats map, and points, then save it via Firestore add or set.

Create a fromFirestore factory constructor on the character class to build a character from a Firestore document snapshot, mapping data, id, vocation, updating skills, and toggling is fave.

Sync character stats from Firestore by using the stats mixin's set_stats method to update points and a dynamic health/attack/defense/skill map, then create characters with the factory constructor from saved data.

Explore how to use Firestore with a converter to map a character to and from Firestore, simplifying add, set, and get operations via from Firestore and to Firestore methods.

Add new characters to the app and Firestore by updating global state and saving changes to the characters collection, using a Firestore service with converters and async methods.

Fetch all characters from the Firestore characters collection on startup, convert docs to character objects via the Firestore converter, update the global character store, and notify listeners.

Learn to persist character changes by wiring the save button to a Firestore update in the character store, updating stats, points, skills, and is fave, so restarts fetch latest data.

Implement a Firestore delete function and update the character store to remove characters from the database and the global state. Notify listeners to refresh the home screen.

Learn to implement swipe to delete in Flutter with the Dismissible widget, removing a character from the store and persisting the change to Firestore via a unique id key.

Explore Flutter animations by comparing implicit, built-in animated widgets with explicit animations driven by an animation controller. Learn when to use each approach: quick, property changes or fine-tuned, custom control.

Animate an image between screens using the Flutter hero widget, linking home and profile screens with a unique tag based on the character id, wrapped around the character image.

Learn to animate rotation in Flutter using the animated rotation widget, with turns and duration to rotate a star icon by half turns on stat changes.

Create a pulsating heart icon in a profile screen with an explicit Flutter animation using an animation controller, the AnimatedBuilder widget, and a tween sequence in a stateful heart widget.

Create a pulse animation by building a tween sequence that grows a heart icon from 25 to 40 pixels and back, and connect it to an animation controller to play.

Leverage a size animation linked to an AnimatedBuilder to pulse a heart icon, triggering forward after a reset so tapping repeatedly restarts the animation.

Learn to make the heart icon color conditional using a ternary operator on widget.character.isFave, switching between a red primary app color and gray, with stateful toggling and layout adjustment.

Position a heart icon over a container in flutter by using a stack and a positioned widget, placing it in the top-right with ten-pixel offsets.

Explore Flutter forms and user input using text field widgets with editing controllers and the built-in form widget with form fields, linked to a color-coded to-do list.

Explore text fields in Flutter to collect user input, customize keyboard types like email, add labels with input decoration, and track changes with onChanged and setState.

Learn to use a text editing controller to automatically track text in a field, access it via controller.text, trim whitespace, and print on submit; explore form widgets for validation.

Explore the flutter form widget, arranging planned to-do title, description, and priority fields in a column with a submit button and a global key for future validation and saving.

Learn to add two text form fields inside a flutter form, a title with a 20 character max and a description with a 40 character max, both with labels.

Explore building a Flutter dropdown form field for selecting a to-do priority using a priority enum (low, medium, high, urgent), mapping to dropdown menu items and handling value changes.

Submit a form by using the form widget and onSaved callbacks to capture title, description, and priority, then validate, save, and add a new to do to the list.

Learn how to reset a Flutter form after adding a to do by using the form's global key and reset method to clear fields and reset the priority to low.

Discover why riverpod offers a scalable Flutter state management solution through central providers consumed and updated across home and cart widgets, with a practical shopping cart example.

Set up a starter Flutter project, install the Flutter Riverpod package with pub get, and explore using providers to manage a global cart state across the home and cart screens.

Define a simple read-only Riverpod provider exposing a product list for the home screen, and a second provider that filters by price to illustrate consuming providers in widgets.

Wrap the app with a provider scope to expose providers to all widgets, convert the home screen to a consumer widget, and use ref.watch to display all products.

Learn to consume provider state in a stateful widget with Riverpod's consumer stateful widget and ref, watch the reduced product provider, and display cart items with image, title, and price.

Learn how river pod generator creates provider code from annotated functions. Install river pod annotation and river pod generator, run build_runner, and use auto-generated providers.

Explore how a notifier provider manages cart state, updating items and notifying listeners. Build a cart notifier with an initial product set and dynamic add to cart or remove actions.

Learn to update cart state with a notifier provider by defining add product and remove product methods, updating the state with a new set, and notifying consumers to rebuild.

Generate notifier providers with the Riverpod generator by annotating a class and running build_runner watch to create the cart notifier provider.

Learn to create a read-only, dependent provider that computes the cart total by watching the cart provider and summing product prices, using Riverpod code generation for automatic updates.

In this final touch, learn to display the cart item count by watching the cart provider with a consumer, converting the length to a string for the blue circle.