Assignment 3 - Stateful Widgets

1. Due
2. Objectives
3. Collaboration
4. Setup
   1. Accept the assignment on GitHub
   2. Check out the code in VSCode
5. Instructions
   1. Screen One - Rows and Columns
   2. Screen Two - More Rows and Columns
   3. Screen Three - Buttons and States
   4. Screen Four - Image Swapper
   5. Extra Credit - Image Swapper Deluxe
6. Submission

Due

Tuesday, February 20 @ 11:59pm via GitHub

Objectives

• To practice Row and Column layouts
• To gain more experience defining Stateful widgets.

Collaboration

This assignment may be completed in pairs. Both partners receive the same grade. You are assigned to the same teams as Assignment 2. Contact me if you wish to change your team.

Setup

Accept the assignment on GitHub

1. Follow this link to GitHub: https://classroom.github.com/a/QnkEGhQR.
2. The next screen talks about teams:
   • if you are working alone: create a new team using your last name. If you get an error, add a “2” to your team name.
   • if you are working in a pair:
     1. The first person to sign up should create a team named “<your lastname>-<partner’s lastname>”, e.g., “smith-jones”. If get a GitHub error, add a “2” to your team name.
     2. The second person to sign up should click “Join” on the appropriate team from the list.
3. Click “Accept the assignment” on the next page.
4. The next page will say “You accepted the assignment…” Click on the link to your team’s assignment repository – bookmark this page. If you are the first person to accept the assignment on your team, you will have to refresh the page a few times before the link appears as GitHub takes a second to create the repository.

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 repositroy 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”.
8. You are now ready to work on the project. You must follow the GitHub workflow when working on this assignment. It is extremely important if you work on a team or if you use multiple computers.

Instructions

You have a skeleton of a Flutter app already provided for you.

There is a PlaceHolder widget in each of ScreenOne-ScreenFour. Delete this widget and replace it with the widget(s) that are required to achieve the UIs described below.

• Do not edit the HomeScreen widget.
• You must test your application on a phone (real or emulated).
• Your solutions must follow the additional instructions and constraints described for each Screen to earn full credit.

---

Screen One - Rows and Columns

• Achieve the layout below using only Row, Column, and Image widgets.
  • The bananas are as close together as possible.
  • The row of bananas is not in the vertical center of the screen, but rather “on top” of the stack of bananas
  • There is more than one way to achieve this look.
• The banana is provided in assets/images/banana.gif. Limit the width of the Image to 100px.

---

Screen Two - More Rows and Columns

• Achieve the layout below using only Row, Column, and Image widgets.
• The banana is provided in assets/images/banana.gif. Limit the width of the Image to 100px.

---

Screen Three - Buttons and States

• Create a custom StatefulWidget that holds all of your needed widgets, and replace the PlaceHolder with your custom widget.
• Reproduce the UI below using ElevatedButtons, Text, and a Column.
• Pressing the “Press Me” button increments the counter, pressing “Reset” resets it to zero.

---

Screen Four - Image Swapper

You will define a custom widget that swaps between two pictures when the user clicks on the image. The two images in the screen sample below are in the assets/images folder. You may use them or add your own.

• Define your own widget named ImageSwapper that extends StatefulWidget.
• Define your ImageSwapper constructor to take two required parameters that are of type String and store them in class variables.
  • These String parameters are image files you want to swap between. You may not hard code the asset names into your ImageSwapper widget. They must be passed as constructor arguments from the ScreenFour widget (they are hardcoded there).
  • Your constructor call in the ScreenFour widget should look something like ImageSwapper(imageOne: "assets/images/astley.webp", imageTwo: "assets/images/banana.gif")
• You can achieve this UI using only the Image, GestureDecorator, and Center widgets.
• Hint #1: Recall that State class methods can access their parent widget’s class variables through the widget keyword.
• Hint #2: the build method is like a regular function. It can have more code in it before the return statement. Put code inside the build method to decide which image to draw.

---

Extra Credit - Image Swapper Deluxe

• Instead of your ImageSwapper swapping between two images, have it take a non-empty list of filenames and iterate through the list on each click.
• Reaching the end of the list must cycle back to the beginning.
• Your solution must work for any non-empty list of valid filenames; you may not hardcode the length.
• Add more images to the project to demonstrate your solution.

Submission

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