What to blog this week? Start with the self? I need to admit that I need more time to find my blogging style and figure out how to write with purpose. Why? I’m fascinated with people who can express themself authentically in this world filled with noise and distraction. My blogging journey started a month ago as my class requirement, which I dreaded more than I care to admit. Let’s not get too curious about that at this point. Let’s reset on a positive note, blogging has becomes a rewarding experience. It got me curious about my thoughts and writing process. That is not the intention of this week’s blog either, let’s move on.
At the end of my last blog, I planned to talk about our mobile app’s landing screen and the Join Project screen. Since my teammates got the admin website’s add project (part of the project requirement) working with test data, most of the functionality on the student’s side (authentication with metadata), and using Firestore Database to back our data from the Citizen Science’s admin website and the student’s field app. I got busy focusing on implementing our UI. For the landing screen UI, it serves as the home screen after an existing user logged in (or upon a new user’s successful registration). It displays a simple app bar (home IconButton and log out IconButton) that extends StatelessWidget (immutable). The body of the landing screen is a Widget that returns a placeholder text to welcome the user if the user doesn’t have any project ids after fetching project data from our Firestore collection named ‘projects’. We use ListView.builder() to display a linear array of ListTiles if our query has data. ListTile is a fast way to set the project name, and we can also set the subtitle property of the ListTile to any text. In our case, we set our subtitle to ‘View Details’, so that the user sees that this ListTile is an interactive element. We use the onTap property to route the user to our Project Explanation screen when the user taps on the ListTile. Since we want to support our users in contributing to multiple Citizen Science projects, we made our ListTiles scrollable, which our ListView can handle. To prompt the user in adding a project, our UI implements a material design floating action button. It was easy to set the icon, label, and background property of the floating action button. We had the onPressed property routing the user to our Join Project Screen.
The Join Project screen was designed to look like a pop-up card, so we return a Scaffold with a body. This is the most basic layout structure, and it gets the job done. We aligned the close button to the upper right corner of a container so that it’s easy for the user to close/exit out of the Join Project screen. When the user clicks on the x icon, it pops the user back to the landing/home screen. We kept the Join Project screen simple by only displaying the “Join a Project” text, and we tag on the emoji key because emoji is fun and easy to show on the screen. Next, TextField for the user to enter a project code. Oh, style time! Let’s decorate this TextField with hint text “Enter the project code here”, enabled order with a blue-grey border outline. Onto our fuchsia-colored submit button, it shows the word ‘Submit’. When the user clicks on the submit button, it calls the async function that looks up and validates the project code on our Firestore database collection. Upon success, it routes the user to the landing/home screen. This routing decision is for a minimum viable product that allows the user to enter additional project codes from the landing/home screen’s Add Project button. We had a note to consider routing the user to the Project Explanation screen. This route might work better for the student to read about the Project Explanation and get started on the project after they signed up for the project. Let’s see what the team decides. We might have enough time to implement more features and support students in entering multiple project codes on the Add Project Screen. We are midway through our project and still need to focus on our MVP, so we are not introducing any major change to our prototype that meets our client’s requirements.
This course requires 8 blog posts, so I’ll hold off on our app’s Project Explanation Screen and Manage Observations screen in blog 6. See you next time then!
M :Z
Resources:
- ListTile class. https://api.flutter.dev/flutter/material/ListTile-class.html
- ListView class. https://api.flutter.dev/flutter/widgets/ListView-class.html
- FloatingActionButton class. https://api.flutter.dev/flutter/material/FloatingActionButton-class.html
- Future<T> class. https://api.flutter.dev/flutter/dart-async/Future-class.html
- Cloud Firestore Data model. https://firebase.google.com/docs/firestore/data-model
