DMST 102 – Project 01 – 20 pts total

Goal: Create a mobile app like the image below that displays a scrollable list of 6 recipes and their ratings.

All of the Widgets and code techniques you will need to complete the project have come from homework assignments, with two small exceptions. (Details to follow.)

Step 1: Mockups (4 pts total)

Goal: Create rough mockups of your layout to use as a guide.

They do NOT need to exactly match your final code.

Requirements:
[2pts each]
1. Create a rough mockup of the boxes you will need to create the app’s layout. You can draw them manually (and take a picture), or use software.
a. Show how your boxes will fit within other boxes to create the layout.
b. At minimum, label the main elements of the layout:
i. app bar
ii. recipe block (a block = each recipe’s text + image + ratings)
iii. recipe image
iv. recipe title
v. ratings list
c. You may also label any other blocks as needed if you find it useful.
d. You only need to mock up 1 recipe block.
e. It’s OKAY if your boxes aren’t flush within each other like they will be in the app. It’s more important to show which boxes belong in which others.

2. Consider the Flutter widgets that you will need to generate the layout in your mockup from #1.
a. Create a hierarchy (branch/leaf) diagram that represents the potential widget structure of your app.
b. This time, show the relationship between at least two recipe blocks (and any children/descendants), in addition to their parents/ancestor Widgets.
c. As before, you may draw or use software to create the diagram.

Step 2: Upload the Starter code

Goal: Upload the starter code .zip file into Flutlab.io.

1. In main the Flutlab screen that lists your projects, select the Upload Flutter Project Zip button from the right-hand menu.

2. Upload the .zip file provided in BB for this project.

3. The starter code contains three list arrays that represent the recipe content: recipe title, image file name, and ratings.
a. The content of each index value makes up a single recipe.
i. So, recipes[0] is the title for images[0] and ratings[0].

4. The images have also been provided as assets, as you can see by expanding the file explorer tree:

Step 3: Create the application (16 pts)

Goal: Use the provided Scaffold to recreate the app shown in the image from page 1.

The “10/14 – Scaffolding” presentation code shows how to add widgets to a Scaffold’s appbar and body.

SUBMIT YOUR FINAL CODE AS A FLUTTER ZIP FILE.

Requirements:

[8 pts]
1. Create a layout that matches the image from page 1.

a. Use a ListView widget to create your scrollable list of recipes.
i. See the “10/14 – Scaffolding” presentation for an example of how to use the widget.

b. The recipe image and the text/ratings block should each take up half the available screen width.
i. Consider which Widget from previous homework assignments is flexible enough to provide that dynamic.

[1 pt each]
2. Use a loop and the provided recipe data to generate the recipe blocks.

3. Use a loop and the ratings list data to generate the rating icons.

4. Each recipe block should have:
a. 10 pixel bottom margin.

5. Each image should have:
a. 10 pixel right margin.

[2 pts]
6. Each recipe title should be:
a. Bold
b. Have a 2 pixel right and bottom margin