Flutter — Building A Dashboard With Tab Bar Navigation: Devlog #2

In this Devlog I go over some updates on the Fitness App project, code from the Flutter codelabs tutorials that will be useful for the app, and a simple dashboard that I designed with a tab bar for navigation.

If you have not read the first Devlog in this series, I set up my development environment in Android Studio, found a solution to using Virtual Devices with an AMD processor, and laid out some general features that I want for the app. Go check that out before reading this!

Project Updates

A Name For The Fitness App, And Design Mock Ups Coming Soon

So as of right now, there is no name or design for the app so until one is decided on, I’ll be referring to it as Fitness App. Very clever, yes, but I’ll get to thinking of a name a little bit down the road once I get started on prototyping the features. The name just isn’t nearly as important as getting to a working prototype. However, I’ll need to start doing some design mockups in Photoshop relatively soon so you’ll see those within the next few Devlogs. I want to have some design guidelines to go by while implementing code, that way I won’t just be putting widgets (everything in Flutter is a widget) down in random places.

Austin Howard Tech Wiki — Using Google Sites As A Project Planning Tool

I also want to mention that I’m using Google Sites as a project planning tool for my website (including this Devlog for my blog), and any other software projects that I work on, so all of the planning and resources for the Fitness App are on the Austin Howard Tech Wiki page. Soon there will be an official page for the Fitness App on this website, so stay posted for that.

Firebase Will More Than Likely Be My Backend Solution

I’ve been watching many videos about using Firebase as a backend solution for Flutter Apps and from what I can tell, Firebase is the way to go.

Firebase handles authentication, storage, database, and hosting without having to maintain a server. I’ll more than likely be using Firebase for it’s powerful asychcronous database functionality, the ability to easily integrate with other Google software tools like Analytics and Cloud, and it’s ability to easily scale up and down depending on traffic.

It’s intuitive that scaling up is important for an App, but also being able to scale down when necessary can save on costs.

For example, if you launched a marketing campaign and your backend scaled up to handle a jump in traffic, costs will also increase. If traffic drops back down after marketing, you don’t want to continue paying those extra costs. You want to be able to scale back down with your traffic. Firebase handles that.

Firebase has some incredible features that I can’t wait to use and show off in these Devlogs!

Useful Ideas From Codelabs Tutorials

Building Beautiful UIs with Flutter

I learned several new things from completing the next tutorial on the Flutter.io codelabs: Building Beautiful UIs with Flutter. In this tutorial, I built a very simple chat app called Friendlychat.

  • The first thing I want to mention is that I now know how to build a chat system with user input and a couple of Flutter widgets. It’s amazing how easy the widget hierarchy makes implementing a message bar with an icon in the same row. People are used to having chat bars floating at the bottom, so it maintains the normal look and feel that users are used to for sending chat messages.
  • The second incredibly useful thing that I will definitely need to use for the Fitness App is the Theme Colors. You can specify the theme that you want your App to have based upon whether the device is iOS or Android. Material Design in Flutter does a great job with maintaining native device feel and design. Android and iOS users each want the App to feel like what they’re used to.

I don’t want to go over too much code in these Devlogs, but occasionally its necessary to explain significant changes or things that I’ve learned. So here’s the code:

In the code, the bottom section surrounded by the blue box is building the widget that the App will live inside. As you can see, when we go to set the theme of the App, we select a theme based upon whether the device is iOS or not. If it isn’t iOS, we go with the Android theme. In the top section of code, we define ThemeData for attributes that we want for iOS and Android. These code snippets get used to define the ThemeData for the App.

The last couple of big takeaways from this tutorial are the ListView Widget and the Widget Hierarchy, the Avatar, and Input Widgets.

  • I’ll be using the ListView Widget for a ton of things in the Fitness App. With the widget hierarchy, there’s so many different things that you can do, like wrapping an Expanded Widget around the List Widget to control overflow of the text off the screen. Each widget is customization with it’s own attributed.
  • The CircleAvatar class is going to be useful for displaying user profile images in the Fitness App. The Avatar is essentially the standard method for implementing user profile images and is a widget just like everything else in Flutter, so it can be customized to whichever specifications needed. Also just a default text display of the users initials can be used in the absence of a picture, similar to the Twitter egg.
  • Lastly, obviously keyboard inputs are crucial in most Apps, so now I know how to use it for the Fitness App.

General Dashboard Layout

Upon opening the app, I want to display a dashboard with navigation to workouts, analytics, and a progression picture tracker.

Here is what I’ve created so far…

I think this general layout is simple and intuitive to use. This is similar to Twitter’s design — circle avatar in the top left corner, title just to the right, and a tab bar below to switch to different views.

The next thing I’ll want to do is add another tab for the dashboard, and have the title change to display the current tab. The tab bar functionality is common for mobile apps so it’ll feel normal and comfortable for users. Obviously more tabs can be added because the icons occupy much less space than words.

I’ve just used the DefaultTabController class to quickly prototype this out, but I can always customize it by building my own TabController.

The icons also look pretty nice to me so I’ll probably just stick to using these rather than creating my own.

What’s Next?

  • Finish up minor tweaks to the current layout to display including another dashboard tab, and changing the top bar title to display the current tab.
  • Make a user profile page where the user can enter information about their account and change their avatar image.
  • Design a view for the workout tab which will include the workout generator, and saving workouts.

These 3 things will probably be the only things in the next Devlog — the workout generator will probably take a while to design so I’ll be spending the majority of the time over the next week on that.

Workflow Speed

The speed of my workflow will increase as I continue learning Dart and Flutter throughout the building process.

I hear a lot of people say that there should be a well fleshed-out design for an application before any code should be written, but I prefer to just go ahead and write as much code as possible. It’s the only way I’m going to learn a completely new language and framework.

If you’re reading this, I’d love to know what your philosophy on the development process is…design everything first before writing code…or just design while writing code? Comment below and we can spark up a discussion/debate.

Originally published at austinhoward.tech on December 15, 2018.

Software Engineer & Writer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store