Build an Employee Attendance System with Flutter & Supabase

Build the login screen for the Fang Fang attendance app in Flutter. Implement a responsive UI with a red header, centered icon, and text editing controllers for email and password.

Build the login and register UI in Flutter, including text fields and a password input, styled login button, and navigation to the register screen with a back app bar.

Learn to implement provider-based state management and create an auth service class backed by a Supabase client. Build a utils snack bar helper and manage loading with ChangeNotifier.

Implement a Flutter method to register employees using Supabase, including input validation, loading state, and snackbar feedback, then navigate back on success.

Implement login and sign out methods using supabase, handling email and password authentication, loading states, and errors; expose current user and set up providers with multi provider in main.dart.

Assign register and login functions to the Flutter UI using the provider pattern, show a loading indicator, and wire email and password fields for employee authentication with Supabase.

Create a user model and database tables in flutter with supabase, including id, email, name, and department as a foreign key, plus a json factory and department and employee tables.

Learn to build a database service class in Flutter with Supabase, insert new users into the employees table, generate an eight-character employee ID, and wire it to the auth flow.

Implement a Flutter app authentication flow with a splash screen that checks the auth state and navigates to login or home, with sign-out to reset the session.

Build a bottom navigation bar on the home screen with a white rounded container and Font Awesome icons to switch between calendar, attendance, and profile screens using an indexed stack.

Create an attendance screen UI in Flutter using a scrollable column, padded containers for welcome text, employee name, and today's status, plus a shadowed rounded status card.

Build a Flutter attendance screen that uses the slide_to_act package to implement slide-to-check-in and slide-to-check-out, with date/time displays and a reset on submit.

fetches current employee data from the Supabase employees table, maps it to a user model using a future function, and displays the username or ID in the attendance screen.

Create an attendance system in Flutter with Supabase by adding an attendance table, defining an attendance model, and building an attendance service to fetch and mark check-ins and check-outs.

Implement a Flutter & Supabase based attendance screen with a function to get today’s attendance and to mark check-in and check-out, updating the model and the UI in real time.

Develop a calendar-based attendance history in Flutter by adding a month-year picker and querying Supabase for employee-specific records, then map results to an attendance model.

Develop the calendar attendance UI by wiring the attendance provider and service to fetch history via a month-year picker, with a future-year restriction and a FutureBuilder for loading and data.

Show how to display attendance history in a Flutter app using a list view, formatting dates, and presenting check-in and check-out times with a styled container.

Implement a Flutter attendance feature that retrieves the user’s current latitude and longitude with the location package, stores coordinates on check-in/out, and optionally uses geocoding for street-level details.

Develop an employee attendance system with Flutter and Supabase by storing check-in and check-out locations as JSON maps. Enforce location permissions, capture device location, and save it in attendance records.

Create a department model with id and title and a fromJson factory, then fetch all departments from the department table, map to models, and notify listeners for the UI.

Implement an async update profile function to save name and department to the employee table for the current user in Supabase, then show a green snack bar and notify listeners.

Create a profile screen section with an avatar, employee ID display, and a full name field, and implement a department dropdown wired to the database to update the profile.

Add a sign out button on the profile screen that uses the auth service to sign out and redirect to the login screen automatically.

Enable row level security for the attendance table and create policies to restrict insert, update, and select to authenticated users and their own records.

Configure read access for the departments table in Supabase using the read access template, noting that no policies are needed for this simple app.

Enable and configure row level security policies for the employees table in Supabase, creating insert, update, and read access rules based on authenticated users' emails to safeguard attendance data.

This video demonstrates end-to-end testing of the Flutter and Supabase attendance app on a device, validating login, read/write attendance, row-level security, profile updates, and sign-out.