Full Stack Flutter: Building the Steady Calendar App

An advanced course covering the step by step development of Steady Calendar, a real app. We also cover Supabase in order to develop a backend server and database for this app.

Skill level: Advanced
Required skills: Some experience with database, serving concepts and basic Flutter.
Last updated:
Your progress:

01: Module Overview

Welcome to this course!

02: Module Demo

What We'll Build in This Module

03: Organizing Our Code

An initial directory structure for our app.

04: Directory Setup

Setting up basic named routes

05: Directory Setup

Setting up basic named routes

06: Implementing SCFlatButton

Our first custom widget

07: Implementing intro.dart

Full implementation of the intro slider

08: Image Sizing

Considerations when planning out app image sizes.

09: Implementing login_options.dart

Setting up the groundwork for our login.

10: How a CDN Works

Architecture overview on why we'll need one.

11: Downloading Our Backgrounds

Setting up our files to upload.

12: Supabase Overview

A intro to supabase.io, the background platform we will use.

13: Asset Upload Prep

Review of what we will upload.

14: Supabase Project Setup

Setting up our supabase.com account.

15: Using Supabase Storage Buckets

Uploading our assets.

16: Building environment specific apps

Leveraging flutter_dotenv for configuration management.

17: CachedNetworkImage

Understanding and implementing image caching on the device.

18: Implementing a Basic Splash Screen

Setting up splash.dart to be used with Supabase.

19: Recap of Module 01

Reviewing what we've learned.

20: Intro and Demo

An overview and walkthrough of what we'll be building.

21: Supabase Auth Overview

An archtecture overview on how Supabase authentication works.

22: Supabase Auth Basic Configuration

Setting up basic auth configuration in your supabase.com account.

23: Creating Google OAuth Tokens

A walkthrough of how to create Google OAuth Tokens for our app.

24: Using supabase_flutter

Integrating the supabase_flutter package in our app.

25: Deep Linking for iOS

Setting up deep linking for iOS devices.

26: Deeplinking on Android

Setting up deep linking for Android devices.

27: Finalizing splash.dart with Supabase

Leveraging Supabase's auth state to handle login transitions

28: Finalizing splash.dart with Supabase

A review of what we've learned

29: Intro

An overview and walkthrough of what we'll be building

30: Information Architecture

Understanding the Importance of App IA

31: Creating Our Models

Modeling, Optional and Custom Types

32: JSON Serialization

Leveraging json_serialization, build_runner, Custom Types and Converters

33: Creating Supabase Schema

Create tables, row level security, indexes and triggers.

34: The Repository Pattern

How to query Supabase data using repositories

35: Creating our Calendar View

Using the table_calendar package to render a calendar.

36: State Management with Provider

Why we will use Provider as well as our implementation approach.

37: Integrating the provider package

Leveraging our repository with provider and integrating it into our app.

38: Integration, Widget Tests and Mocking

Why Integration Tests. Also, implementing a mock repository and provider.

39: Implementing Our Integration Tests

Leveraging integration tests with mocking.

40: Module Recap

What we've covered in this module.

41: Module Overview

The goals of the module, such as forms and managing data, are covered.

42: CRUD in Supabase

Creating, Updating and Deleting Data in Supabase.

43: Implementing Calendar List

Using ListView and Provider to avoid redundant calls to our backend.

44: Forms

Implementing our calendar edit screen for creation or updating of data.

45: Returning Simple State

Implementing our calendar background picker as a simple subscreen.

46: Validating and Saving Form Data

Implementing our delete, validate and save event in our form.

47: Handling Select Calendar Date Updates

Leveraging State to toggle calendar dates in our month grid.

48: Menu Screen with Log Out

Implementing our menu screen, web views and log out.

49: Expanding Integration Tests

Finalizing our integration tests by covering list and edit screens.

50: Module Recap

What we've learned in this module.