Midterm

1. Due
2. Objective
3. Exam Information
4. Setup
   1. Accept the assignment on GitHub
   2. Check out the code in VSCode
5. Instructions
   1. Put your name in README.md
   2. Option 1: Spotify Playlist
   3. Option 2: Instragram Feed
   4. Option 3: Instragram Profile
6. Submission

Due

Friday, February 28 @ 11:59pm via GitHub

Objective

To practice using many of the stateful and stateless widgets we have learned so far.

Exam Information

This assignment counts as your Midterm Exam and is subject to the following rules:

• This is an out-of-class assignment.
• You may use your own resources.
• You may use internet resources.
• You may not collaborate in any way with another individual until the instructor posts the exam grades.
• Direct all your questions to me via Slack, in email, or in person.

Setup

Accept the assignment on GitHub

1. Follow this link to GitHub: https://classroom.github.com/a/NhGU-IKD.
2. Click “Accept the assignment” on the next page.
3. The next page will say “You accepted the assignment…” Click on the link to your midterm repository – bookmark this page.

Check out the code in VSCode

1. In VSCode, go to File Menu -> New Window. You should see an “empty” copy of VSCode pop open.
2. Click the Explorer icon on the left.
3. Click the Clone Repository button. Paste in the URL of the GitHub repository. Hit Enter. You may need to enter your GitHub email and password.
4. A file browser will pop up and ask you where to clone the repository on your local machine. Select the folder where you are keeping your Flutter projects.
5. VSCode will clone the code from GitHub to your machine. A pop-up will appear asking if you would like to open the cloned repository – click ‘Open’.
6. Click on the Explorer Pane icon to see the Flutter project files. Open lib/main.dart.
7. A pop-up should prompt you to “Run pub get”. Do this. If no pop-up, open the Command Palette (View -> Command Pallette), and search for and run “pub get”.

Instructions

Put your name in README.md

Open and read the README.md file in the root directory. Put your name where indicated and save the file.

Choose one of the following options. All options are worth the same amount of points.

Option 1: Spotify Playlist

1. Recreate all text styling, colors, margins, borders, and padding as closely as possible.
2. Feel free to use G-rated text and images of your choosing for album covers and names.
3. Elements must be vertically and horizontally-aligned as shown.Think about what is in Rows, Columns, lists, etc.
4. You do not need to use an AppBar.
5. Recreate the grid-like structure in the top middle using four images of your choosing. You do not need to use a GridView for this. The images must appear square and equally-sized.
6. Use built-in Flutter Icons that are close to the icons presented.
7. You must use a ListView to create the song list in the bottom half. The content must be aligned as shown. The images must be square and equally-sized. Add a minimum of six list elements to ensure the list is scrollable. Only the list of songs should be scrollable.
8. The green, circular play button must be a StatefulWidget that toggles between showing the “play” icon and the “pause” icon when tapped. You must be able to toggle back to the original state.
9. You may ignore the following:
   • the back arrow in the top left.
   • the “currently playing” control bar at the bottom.
   • the gradient background

Option 2: Instragram Feed

1. Recreate all text styling, colors, margins, borders, and padding as closely as possible.
2. Feel free to use G-rated text and images of your choosing for names, profile pictures, and the main feed image.
3. Elements must be vertically and horizontally-aligned as shown.Think about what is in Rows, Columns, lists, etc.
4. You do not need to use an AppBar.
5. The top row of friends must use a ListView (horizontal) of equal-sized elements. Use images of your choosing. You do not need to add highlights, e.g., the red frame. Add a minimum of six list elements to ensure the list is scrollable. Only the list should scroll.
6. Show one single post in the “feed” as in the screenshot. You do not need to make this a scrollable list.
7. The like button (the heart) must be a StatefulWidget that toggles between showing an empty heart to a red-filled heart when tapped. You must be able to toggle back to the original state.
8. Create 3 small profile images of people who “liked” a post. The images do not need to overlap as in actual Instagram.

Option 3: Instragram Profile

1. Recreate all text styling, colors, margins, borders, and padding as closely as possible.
2. Feel free to use G-rated text and images of your choosing for the profile picture, picture gallery, and profile info (name, email, etc).
3. Elements must be vertically and horizontally-aligned as shown. Think about what is in Rows, Columns, lists, etc.
4. You do not need to use an AppBar.
5. The Follow button must be a custom StatefulWidget that toggles between showing a blue “Follow” button to a white “Following” button when tapped. You must be able to toggle back to the original state.
6. The gallery must be a GridView with 3 items per row. Each element must contain an image with the the “like count” text overlayed in the bottom-left of the image (requiring a Stack). You must have a minimum of 12 grid items to ensure scrolling. Only the grid should scroll.

Submission

Commit and push (synchronize) your completed code to GitHub.