Continuing from last week’s post, once the student joined the project successfully by entering the project code that they got from the teacher. The student can view project details by navigating to the Project Explanation screen. In our initial prototype, we intended the Explanation screen to display relevant project information (project name, project description, and observation questions that the teacher wants the student to answer). The design strives for a simple interface; the UI displays relevant project information to help the user understands how her/his observation can contribute to the project. We have our custom Fushia-colored button at the bottom of the screen to prompt the user to start their project observations. Clicking on this button routes the user to the Manage Observation screen. We could route the user to add the Add Observation screen directly. We decided to implement the Manage Observation route. This is because we can group relevant actions that are important to the user, such as adding new observations, editing observations, and deleting an observation on the user’s Mange Observation screen. Our team discussed early on that the entity-relationship between the Student and Observation entities is one-to-many. One student can have multiple observations.
Our app’s Project Explanation Screen shows a Scaffold with an app bar and a body. The app bar shows the home icon (route user to the landing screen), the screen name (inform the user where they are on the app), and a log-out icon. The body of the explanation screen is a container that contained a Listview of widgets. The linear array of widgets includes the close button icon, our custom ExplanationCard widget, and a button widget. The ExplanationCard widget makes it easy for us to style the explanation card, and we can pass the project name and the description of the project to this card’s constructor. We have a button to display the “Manage Observations” as the button title, and it routes the user to the Manage Observations screen when tapped.
The Mange Observations Screen displays all of the observations that the student has submitted on his/her project. The simple app bar is displayed at the top of the Scaffold. In the body of the Scaffold, we wrap the close icon button, our custom explanation card, and our getBody widget in a ListView. To make our screen a bit more stylish, we wrap the ListView in a container so that we can decorate it by rounding the corners for the top left and top right. We can also set the margin on the top so that the container appears like a simple card. We use our custom Explanation card to display the project name so that the students know which project they are managing their observations. The getBody widget returns a StreamBuilder so that our UI can be rebuilt from the latest snapshots of a Stream. This way, we can access our project’s observations collection on Firebase Firestore, and we can query the data by descending date so that the student’s observations are displayed with the most recent submission on top. Our build strategy returns the ListView builder, and we display each of the user’s observation data in our ObservationCard widget in a linear and scrollable array. Our ObservationCard includes a title, subtitle, a blue icon button for editing, and a red icon button for deleting. When the user clicks on the edit icon, it routes the user to the Observation Detail screen. When the user clicks on the delete icon, we have an AlertDialog to confirm the deletion by showing a message “Are you sure you want to delete this observation?” We included a TextButton for “Cancel” and a TextButton for “Yes, Delete.” When the user clicks on the cancel button, we use Navigator.of(context).pop() to route the user back to the Manage Observations screen. If the user clicks on “Yes, Delete” then our onPressed function deletes the observation document from our Project’s Firestore database. We also route the user back to the Manage Observation screen. If the student doesn’t have any observations submitted on the project, we return a Text widget that prompts the student to “Tap the Add Observation button to add a first observation.”
Not too bad right? That is it for this week’s blog. I’ll blog about our Observation Details screen next week then.
M:Z
Resource:
- Scaffold class – material library – Dart API
- ModalRoute class – widgets library – Dart API
- MaterialButton class – material library – Dart API
- StreamBuilder class – widgets library – Dart API
- https://api.flutter.dev/flutter/dart-async/Stream-class.html
- showDialog function – material library – Dart API
- AlertDialog class – material library – Dart API
