Building an App from Scratch: Part 2
Building a Basic UI
Re: The First Launch
Last time we ended by launching the Flutter demo page, and comparing this to a draft interface that I had developed a few months ago. This time, we’ll restart from the former step. Changing nothing, a freshly created Flutter project will launch the following screen:
This charming home page even comes with a floating action button, which increases the You have pushed this button this many times integer by 1 per press. If you’re like me, one thing stands out above all else — even above the DEBUG banner in the top right. The default theme is a light theme. This should be changed immediately, and can be done (at least, in a quick, easy, and temporary way) by changing the theme instance variable in the MyApp widget to Flutter’s default dark theme, themeData.dark().
Here, I have also omitted the tutorial comments in the default project. This theme is a fine dark theme template for us to use going forward. I will be inheriting the practices of scientific computing and will state the importance of coming back and defining a theme to your specifications. At some point, I will come back and adjust the colors to be exactly how I see fit. Building an application with the default theme is not only a bit bland, it simultaneously demonstrates a lack of attention to detail and a severe level of laziness in design. This said, let’s see how it looks:
Not bad! The teal has grown on me over time. Still, this can be further specified if we wanted a different color. As the next minor step, I’ll remove the debug banner. This is done by assigning the debugShowCheckedModeBanner the value false.
The Next Google (or Meta, or Snapchat, or …)
Every f*cking company in the Valley has lowercase letters. Why? Because it’s safe.
- Erlich Bachman, Silicon Valley S1E05
Here it is, folks. I don’t want to make a direct clone of WhatsApp, Snapchat, or Instagram. I want to create something unique. Thus, I present to you:
I can’t overstate enough that I went to school to study applied mathematics, not digital design. Still, it looks presentable and inoffensive enough. The name is implicative without directly stating an intended service — i.e., I have room to grow. This gives us some sense of brand identity that we can change at any point; this is a fictional company for a personal project, after all. Moreover, this eliminates the gross overuse of the phrase the app throughout this series.
And yes, the font is Ubuntu, the font used for the bitcoin logo.
Learning to Walk
There is a long, winding road ahead to polish Gotu into something meaningful, even on the scale of a personal project. I will walk through, now with some level of minutia, the developing form of the Gotu UI.
As I mentioned briefly last time, the intended final UI will consist of three primary pages (or screens as I may have previously referred to them). To do this, I will add a BottomNavigationBar widget.
Easy enough. You’ll notice that the page doesn’t change upon icon selection. (You’ll also notice that I’ve opted to change the teal to orange, I guess I’m in the Halloween spirit.) The Flutter documentation for the BottomNavigationBar widget (linked above) provides an easy example for essentially assigning functions to each icon press. Upon the completion of this basic, 2-page prototype, I went on to build a more fleshed out version.
I’ve implemented a few quality of life polishes: no more words under each icon, correctly labelled pages, centered app title, and a messages icon on the AppBar. There’s more going on under the hood, too. Previously, I had each page loading its own AppBar and BottomNavigationBar. This is not good. The transitions aren’t smooth; essentially, the entire screen is reloading per page selection. Currently the page navigation is being controlled via a TabController. As the class name implies, this controls the widgets that appear in its corresponding TabView widget. In this case, the index of the currently selected page changes per the pressing of a given icon on the BottomNavigationBar. I suspect, however, that I might change this process to incorporate the PageView and PageController classes.
Going forward, it seems I have four prominent empty canvases. The world page will be a long, creative endeavor incorporating the MapBox API for a world map UI. The profile page will be as basic as you can imagine, and similarly for the messages page. The stats page will likely be the last I work on, due to my own lack of clarity on the idea.
What’s Next?
Next time, I hope to cover the struggles I’ve been facing in regards to preparing the Gotu backend. In general, I like to have something near a finished product (screenshots, screen recordings, etc.) prepared for the next installation than the one I’m about to release. While I have been working on doing the write-up on the basic construction of the UI, I have been going through a trial of fire to understand the landscape of how Flutter can (and more often, cannot) interact with various database services.
Next (coming soon)
About the Author
Thanks so much for reading! I’m Garrett — an applied mathematics graduate student, music theory enthusiast, and hobbyist author. My research focuses on computational fluid dynamics, but I am also interested in PDEs in general, graph/hypergraph theory, geometric algebra, cellular automata, and many other fields of STEM.
This series documentaries my attempted transition from the world of academic scientific computing to the realm of full-stack application development.
Feel free to reach out, I love talking to people from all backgrounds, and hopefully each of us can learn something new in the process. You can find me via my personal page:
