Flutter and Riverpod for Beginners | Task Management App

Set up a Flutter to-do app project, learn naming conventions like lower camel case or snake_case, and configure a com dot yourname organization for automatic app naming.

Learn to clean the pubspec.yaml by removing comments with regex, while configuring a Flutter project and reviewing build.gradle and the android manifest for cross-platform setup.

Explore the main.dart entry point in flutter, edit lib main, and launch a to-do app using a material app with runApp, formatting, and basic device testing.

Create an onboarding screen as a stateless widget, import the material library, and override build to return a scaffold with a body and a background color from the material library.

Learn how to display images in a Flutter app by configuring assets in pubspec.yaml, creating an assets/images folder, and choosing asset or network sources for images.

Explore image asset management in Flutter by creating a media resource file, defining a static image base, and encapsulating access with a private constructor to prevent string errors.

Make your Flutter task management app responsive across devices using safe area wrapping and the screen utils package, with guidance on adding the package via pub.dev and flutter pub get.

Learn how to set up flutter screen utils to adapt layouts and fonts across different devices. Understand the builder and child requirements in screen util initialization within the material app.

learn to use screen util with a design size to adapt ui across devices. obtain device width and height with media query to guide scaling and debug prints during development.

Employ screen utilities to adapt Flutter layouts to different devices by using h and w units, replacing containers with lightweight size boxes, and leveraging extensions to scale heights and widths.

Create a reusable white space widget in Flutter to standardize vertical spacing across features, implemented as a stateless widget in core/common, using a height property that yields a SizedBox height.

Learn to integrate Google Fonts in a Flutter app using the Google Fonts package or by editing pubspec.yaml for Poppins, and tailor font size and style.

Learn to build a row layout in Flutter using the Row widget, exploring mainAxisAlignment options and mainAxisSize to position image, title, subtitle, and the skip button.

Build a bottom row layout by nesting a secondary row for the button before skip, skip, and swipe indicator, using a size box for precise spacing and nullable width/height handling.

Create a reusable fading text widget in Flutter that enforces a single line with overflow fade, left alignment, and Google Fonts, then abstract it for Riverpod reuse.

Build a swipeable two-page onboarding in Flutter using a page view inside a stack, with a persistent bottom row and a smooth page indicator, managed by a stateful widget.

Launch the authentication UI by building a sign-in screen with phone login, country picker, and OTP flow, while standardizing a dark scaffold background via the material app theme.

Explore how to use Flutter's navigator to navigate to the sign in screen by pushing pages onto a stack, using context to locate the nearest navigator.

Add an image asset and centered instruction text on the sign-in page, apply 30 horizontal padding, and style with Google fonts dot Poppins and a non-underlined text field border.

Install the pinput plugin in flutter, configure a six-digit otp field, and customize its appearance while wiring onChanged and onCompleted to capture pin for firebase authentication on iOS and Android.

Initialize Firebase in main.dart by adding Firebase Core and Firebase Auth, detect platform, and await Firebase initialization before runApp, using widget binding to ensure setup completes.

Learn to enable Firebase phone authentication in Flutter apps, configure SHA-1 for Android, connect to Firebase console, and test OTP flows safely with a testing number.

Implement Firebase authentication in a Flutter app by building an authentication repository and controller, enabling send otp and phone verification, and handling errors with snack bars.

Explore state management in Flutter by distinguishing between stateful and stateless widgets, updating data with setState, and sharing a single source of truth across screens using Riverpod.

Learn to build apps with riverport and flutter-hooks, creating shared state via a state provider, using consumer widgets and watch or read, and transitioning to local state with hooks.

Explore how to combine Riverpod and Flutter hooks in a single widget using a hook consumer widget, enabling counter state managed by both provider and hooks.

Learn how Riverpod code generation automates provider creation for a counter app, using build runner, Riverpod generator, and annotations, while leveraging part directives to generate boilerplate-free providers.

Add and configure Riverpod, hooks, and Firebase in a Flutter to-do app. Implement a country code picker with the country picker package and a prefix icon.

Learn how to wire Riverpod providers to a Firebase authentication flow by building a reusable authentication repository and controller, and integrating them into the sign-in screen.

Learn to send an OTP via the auth controller with Riverpod, manage phone input using a text editing controller or hooks, and show a loading indicator during async operations.

Learn to implement Firebase phone otp verification, sign in, and store authenticated user data locally with a lightweight database, enabling on-device CRUD and json-based server communication.

Build a user model with id and is verified, using fromJson and fromMap factory constructors, and toMap and toJson for converting server data to a local device database.

Create a sqlite database helper in dart to store and fetch a user in a local users table with id and is_verified, using insert with replace.

Learn robust error handling in Flutter: complete sign-up and save verified user, navigate to home screen with push and remove until, and display snackbars for Firebase and errors with try-catch.

Learn to implement a Flutter OTP verification flow using Riverpod and Firebase, including sending and verifying OTP with a verification ID, showing loaders, and routing to home or onboarding.

Learn to build the home page of a task management app in flutter, featuring a transparent app bar with a logout action that clears user data and returns to sign-in.

Implement and style the app bar with an add icon button and rounded border, and create a Field widget-based search field with prefix/suffix icons, hint text, and keyboard type.

Build a two-tab task interface with a tab bar and tab controller, showing pending tasks and completed tasks, inside a safe area with padding and a scrollable list.

Create a tabbed Flutter add task flow with a tab bar page view, red and blue containers, a tap controller, and an add task screen with text editing controllers.

Enhance the todo page with padding, centered layout, and a dynamic round button, using conditional border and background colors, while adding controllers and notifiers for title, description, and date pickers.

Build task date, start time, and end time providers with Riverpod, integrate a footer date time picker, and format dates with intl in a Flutter task app.

Build a local sqlite database for a Flutter task app with a db helper and a tasks table. Implement add, delete, read, get by id, and update operations.

Build a todo tile in a Flutter Riverpod app, displaying today’s active and completed tasks with a consumer widget and FutureBuilder, and assign a random color for each tile.

Add a todo model in a Flutter app using Riverpod, build a task tile with formatted start/end times via a date extension, and handle basic save flow.

Build a completed tasks view in a Flutter and Riverpod app by reusing the active tasks widget, filtering for today’s completed items, and enabling deletion from the database.

Explore building a task management interface in Flutter by implementing expandable tomorrow and day-after-tomorrow task sections with padding, color theming, and reusable to-do tiles.

Build reusable task expansion tiles in Flutter by creating a task expansion tile widget, using an expansion tile controller to toggle icons, and applying zero padding and responsive styling.

Learn to build a themed expansion tile for tomorrow tasks, refresh state on expansion, pass title and subtitle, and render todo tiles from a snapshot with dynamic styling.

Create a day after tomorrow task section by duplicating tomorrow's tasks, with expandable tiles on the home screen, manage date formatting, and implement user notifications for task start.