Inspire — a mobile app development project
Inspire is a mobile app concept developed in the course of Mobile App Development class at the University of Miami. It is essentially a design prompt generator that generates a design solution for specific target users.
The target audience of this app are UX and product designers / professionals or anyone who wants to get inspired to solve creative problems!
I was inspired by other design prompt generator web applications out there and thought it will be cool to try to develop one for this class using flutter!
Design
One thing I would like to address here is that my original design was to have a separate button that is similar to the iOS guideline below — where there are margins on the left and right side of the screen.
However, I did encounter several technical issues (see implementation issues below) so eventually I had to pivot to the current design where it’s extended to both sides of the screen.
Development
The logic for the MVP of this app is fairly straightforward since the sole interaction will just be pressing the ‘generate’ button:
- Declare 2 string variables with placeholder texts — a solution and target users
- Store 2 lists of terms in their respective arrays
- Create a button with the label ‘Generate’
- onPressed: randomly select an item from each arrays and replace the placeholder text with the selected terms
However, there are a couple of features I would love to work on for future implementation:
- Option to lock the terms if users are satisfy with one of the term and would like to continue generating the other term
- Implement a way to organize the terms in a more logical sense so that the design prompt won’t generate something that doesn’t make sense — for example, design a pet & plant sitting app for people who ride bikes 🤔
- Highlight or underline the generated terms so they stand out more
- A ‘back’ button so the users can revert back to the previous generated prompt
Implementation Issues
The only problems I had were styling the components, especially the ‘generate’ button and the spacing between each elements.
In the beginning, I used the elevated button widget and it worked perfectly but the style is inconsistent with the app as a whole — so I created a custom image button using Adobe XD to match the font and colors I used.
I wanted to have the button fixed at the bottom so it’s not only closer to the thumb for easier access, but also more aligned to the iOS Human Interface Guidelines (high contrast with large touch target and margins on the sides of the screen). But here’s the problem, each prompt has different length which pushes the button up and down every time it’s pressed.
I tried using different Main Axis Alignment properties, different height values for Sized Box widget and nothing worked! An error with ‘bottom overflowed by x pixels’ also started showing up, but I was able to find a solution on stack overflow that fixed it by setting the container width and height to ‘double.infinity’ and adding a ‘single child scrollview’ widget to the body.
But that didn’t fix my button spasm — so I tried searching for ‘fixed button flutter’ and one thing that came up a couple times were the ‘bottom navigation bar’ widget. And that was it! I had to remove the button background since the widget has its own background color in white. I did try to set the background color to transparent and searched for other solutions online but nothing ended up removing the background. So I just left it like that 😂!
Even though it’s not recommended to have a button looking like that, I am still very happy with how everything turned out!
