5. Prj 2: App GUI & Navigation

In this lab, you realize your prototypes using FlutterFlow.

5.1 Preparation

• Explore FlutterFlow, read, understand and use

  • tour of FlutterFlow
  • App Builder
  • layout
  • nav-bar
  • state management
  • accessibility
  • localization

• 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.

5.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.

5.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.