Skip to content

6. Prj 2: App GUI & Navigation

In this lab, you realize your prototypes using FlutterFlow.

6.1 Preparation

  • 📌 Explore FlutterFlow, read, understand and use all links given in FlutterFlow -- except Supabase.

  • 📌 UI Development: Two team members should focus on creating reusable components (e.g., cards, primary buttons), while the rest implement the necessary screens using these components.

  • 🧰 Ensure you have a complete, functional version of all app screens. This means either:

    • You encounter a blocking issue that we can address together during the lab, or
    • All screens are visually complete (layout only—no logic, interaction, data, or navigation required).
  • 🧰 Create a data flow diagram showing how data moves through your app.

6.2 During the Lab

  • We will address your questions and provide support.
  • You will define the second milestone.
  • You will finalize your screen layouts.
  • You will implement navigation between screens.
  • We will discuss your data requirements, define the app state, and connect your UI to the app state data.

6.3 After the Lab

  • 🧰 Conduct a retrospective with the tutor and record the action items.
  • 🧰 Work on your issues.
  • 🧰 Add your data flow diagram to your documentation.
  • Prepare the next lab: Prj 3: Supabase & MVP