Skip to content

3. Lab: Design & Flutter GUI

In this lab you will improve your design skills. Design is a craft that you can learn. It is an art if you want to be exceptional. You do not need to be exceptional to get a good grade in this module. However, you need to learn the skills ;) In addition you will continue to learn flutter.

  • Everything which should be done individually is labeled with 📌.
  • Tasks divided in the team are labeled 🧰.
  • Remember, everyone needs to do some 🧰 tasks for each lab.
  • You will get feedback for everything with 🧰 three days after this lab, and we will discuss it at the start of lab 3, i.e. another chance for feedback ;)

3.1 Preparation

Everything if this chapter should be available in a alpha feature complete version.

3.1.1 Design

  • 📌 Read and understand everything of the chapter design.
  • 📌 Copy a screen with a list of an app you like using styles and components in Figma.

3.1.2 Flutter: GUI

  • 📌 Read and understand everything of the chapter flutter up to Flutter principles (13.6).
  • In your team repository create a folder learning/yourLastname/lab3 with an app with
    • 📌 implementation of the Figma screen of the previous task in Flutter

3.1.3 Paper prototypes

  • 🧰 prepare 2 different paper prototypes that may be used for evaluation
  • 🧰 define 3-5 major tasks for your app for the evaluation

3.1.4 Fonts and Colors

  • 🧰 Choose fonts and colors for your app.
  • 🧰 Choose/design a logo for your app, you may try recraft.ai.

3.2 During the lab

  • We discuss your questions.
  • We will all look at your Figma screen and its implementation in Flutter.
  • We will look at all documents of all teams of lab 2 and discuss them.
  • You will evaluate your paper prototypes with another team.
  • You finalize your paper prototype.
  • You assign the to-dos.

3.3 After the lab

  • 🧰 you realize your final paper prototype in Figma

Document the following parts in your portfolio (use the file docs/3-Design.md)

  • 🧰 your process up to the final Figma prototype
  • 🧰 user flow diagram
  • 🧰 data flow diagram
  • 🧰 reflect shortly, what went well, what was a waste of time and what was surprising

Within gitlab

  • 🧰 you add screenshots of your figma prototype to your issues
  • 🧰 you create your app in your repository in the folder src
    • define the theme
    • add your logo
    • implement the bottom navigation
    • create all files for your screens and widgets