15/5: Frontend - foundations & project setup, start building the UI
Focus: tour the FlutterFlow project, define the data schema, and build the auth and home page UI.
Daily Agenda
Assignment #1 review
Brief review of Assignment #1 submissions.
How to flow in FlutterFlow
Walk through the FlutterFlow project and configure it live.
Data modeling
Define the data structures for the app.
Building the UI
Begin building the UI for the app.
Assignment #2 presentation
Presentation of Assignment #2, including tips & tricks.
1 ~ Review of Assignment #1
We'll do a brief review of everyone's submission, followed by a walk through the common mistakes we spotted, and share the results. Take notes on the feedback for your own project and aim to have everything cleaned up before our next meeting.
Stuck on something? No worries - ping us on Slack and we'll help you unblock things as fast as we can. If it needs more time, we can also find a slot to meet up early the next day and sort it out together.
2 ~ How to flow in FlutterFlow
In this session, we will walk through the FlutterFlow project and configure it live.
App details
- Set a Package name:
com.cluster.<name>- replace<name>with your own short identifier (lowercase, no spaces). - Set the splash screen and launcher icon in the App Assets section.
- Under Nav Bar & App Bar Disable both the Nav Bar and the App Bar globally. We'll build our own headers.
You can find the splash screen and launcher icon in the Figma file, in the "App Assets" page.
Environment Variables
Define two environments:
- local
- production
Add the following environment variables:
Prop
Type
Set the values for both environments. We'll use the local environment for development and the production environment for deployment.
Authentication
- Enable authentication and pick Supabase as the provider.
- Create two pages (e.g. HomePage and WelcomePage) if they don't already exist, and set them as the initial pages.
Supabase
- In the Settings tab, go to Supabase and switch to Connect to Self-Hosted Supabase.
- Enable the connection and set API URL and Anon Key from the Environment Variables you set earlier.
- You will be prompted to enter the Service Role key and click Get Schema.
Once you press Get Schema, FlutterFlow will import the tables and create the definitions for each table and view.
Theme Settings
- Colors: copy in the Calda Academy color palette from the Figma file. Watchout for semantic names (
primary,surface,onSurface, ...). - Typography: set the font family, then update the font sizes and weights to match the Figma file.
- Theme Widgets: here the widgets are defined that will be used throughout the app.
Import custom icons from: academy-app-v1.0.zip.
3 ~ Data modeling
Define the following data structures (FlutterFlow: Data Types -> Custom Data Types). They will be reused everywhere.
Attempt
| Field | Type |
|---|---|
date | string |
solved | boolean |
attempted | boolean |
puzzle_id | string |
completed_at | string |
Word
| Field | Type |
|---|---|
id | string |
word | string |
group_id | string |
Group
| Field | Type |
|---|---|
id | string |
name | string |
difficulty | enum (EASY, MEDIUM, HARD, EXPERT) |
words | list of Word |
resolved | boolean |
4 ~ Building the UI
Create Account page
We will begin by creating our first page that will be used to create a new account for our users. First we need to organize our project structure a bit.
Create a new folder called auth in the pages folder. Then create another folder inside of it called components. The folder structure should look like
this:
Suggested next steps for building the Create Account page are:
Auth header component
We can spot that the header component is used in multiple pages, so the best practice is to create a reusable component for it.
Create a form layout
Recreate the signup flow from the Figma file. The best practice here is to create a ThemeWidgets for both TextField and Labels.
Form validation
We need to add validation for the email and password form fields, as well as the repeat password. You can use the AI to generate the validation functions.
If we look at the bigger picture, the password validation component could be used in multiple pages in later versions of the app, so it's a good idea to create a reusable component for it.
Auth bottom bar component
Check the Figma file again. The bottom bar is used in multiple pages, so it's a good idea to create another reusable component for it.
Think about the parameters you will define for each component so that they will be reusable as much as possible. Also think about the button disabled states and other good UX practices.
Home page
Create a new folder called home in the pages folder. Then create another folder inside of it called components. The folder structure should look like
this:
Suggested next steps for building the Home page are:
Top bar component
Create the top bar layout from the Figma file. We can already bind the current date to the text widget.
How to play bottom sheet component
Add a new component that will hold the How To Play bottom sheet content. Add logic to display the bottom sheet when the user presses the Info icon button.
Be aware of the blur effect on the bottom sheet.
Weekly calendar component
Create a custom widget that will display the weekly calendar. The widget will need to receive the list of attempts as a parameter.
5 ~ Assignment #2
We will finish the day with presentation of Assignment #2. All important information about the assignment are listed in the Assignment #2 page.