Flutter Fast

By Joseph Muller

Flutter Fast, Flutter Far - Issue #1





Subscribe to our newsletter

By subscribing, you agree with Revue’s Terms of Service and Privacy Policy and understand that Flutter Fast will receive your email address.

Joseph Muller
Joseph Muller
The Legend of the Multi-Colored TabBar

A majority of popular mobile apps on the app store use a tried and true navigation scheme: the Bottom Navigation Bar. The idea is to have all 4 or 5 of the app’s main activities visible and within thumb’s reach. If you do a quick browse through the apps on your phone, you’ll find this pattern is far and away the most used.
Bottom Navigation Bar Apps:
  • Spotify
  • Instagram
  • Reddit
  • Twitter
  • YouTube
  • Slack
  • Snapchat
  • LinkedIn
  • AirBnB
  • Coinbase
  • PayPal
  • TikTok
  • Pandora
  • McDonald’s
  • WordPress
  • CashApp
  • Teams
  • Amazon Shopping
  • Zillow
  • Etsy
You should notice a significant absence in this list and that’s because Facebook uses a top tab bar. In fact, in my 30 minutes of swiping through apps, I can’t find another popular app that uses this navigation pattern (if you know of one, comment it here!).
Why is this?
I wish I had a specific answer but it doesn’t seem clear. Maybe it’s because a top tab bar offers less distraction from the content in the main window. Maybe Facebook just likes to do things differently (although I found an article hinting that they might shift to a Bottom Navigation Bar). Regardless of what the reason is, millions of people see a top tab bar each time they log into Facebook…so let’s give it a try!
Tab Bar Basics
Implementing a TabBar in Flutter requires three components:
  • A TabController that manages the Tab Bar animation and index
  • A TabBar that actually holds the individual tabs in the UI
  • A TabBarView that holds the contents of each tab
The most basic form would look like this:
The issue with using a DefaultTabController is that you have less direct control over the TabController since it’s part of the widget tree. There are ways to acquire this control but I prefer creating my own TabController and passing it to both the TabBar and TabBarView. There’s a few ways to do this but since I’m a huge fan of the MVVM architecture, I tend to use flutter_hooks wherever I need a TickerProvider. The full code for the gradient AppBar is shown here (Gist).
AppBar View
AppBar View
As you can see in the above screenshots, creating your own TabController allows you to listen to the tabController events. Adding a listener to the tabController directly lets you listen for when the active index changes. Note that this does NOT let you listen for any scroll events.
If you want to listen to scroll events, such as when the user starts to scroll from tab to tab, you need to add a listener to the tabController’s animation property.
Color along a Gradient
Now that we have the foundational architecture set up and our listeners listening, we can jump into the fun part of this feature: changing the color of the AppBar. There’s a couple different ways you can do this but my approach was this:
  1. Create a LinearGradient
  2. Determine where along the TabBar the tab indicator is (0 being the start, 1 being the end)
  3. Grab the color from the linear gradient at the position determined in step 2
You can create any Linear Gradient you want but I’d suggest creating one that has just as many colors as your TabBar has tabs.
Then you can calculate the position of the TabBar’s indicator using this snippet:
position: (tabController.index / (tabController.length-1)) + ((1 / (tabController.length - 1)) * tabController.offset),
And finally, using that position, get the color at the corresponding position along your gradient. I created an extension method for doing this that can be found here.
Tying it Together
Once you calculate the new color value, you can save it off in your ViewModel. This color should then be plugged in to your AppBar’s backgroundColor property. If you visit this tweet you can see the end result.
Joe Muller
I built a SliverAppBar that fades across a gradient as you scroll using:


@FilledStacks #Flutter #Android #flutterdev #mobile #ReactNative #MaterialYou https://t.co/0Pir5BIxpH
Using a lot of the same logic you can add some additional animations to each Tab in the tab bar. I went a little further to create a version of tab scrolling I call the “Handoff”. Check it out here!
Joe Muller
I introduced a few more animations to my TabBar widget.

I'm calling this type of tab scrolling the "Handoff".

#flutter #flutterdev #fluttercommunity #android #ios #MobileApp #ux #uidesign https://t.co/tiAHVKJAHO
Weekly Promo
My current computer mouse has short cuts for copying, pasting, navigating forward and backward, formatting code, moving windows from screen to screen, hitting enter, and pulling up documentation in Android Studio. Without it I’d easily be half as fast.
Amazon.com: Corsair Scimitar RGB Elite, MOBA/MMO Gaming Mouse, Black, Backlit RGB LED, 18000 DPI, Optical : Video Games
Did you enjoy this issue? Yes No
Joseph Muller
Joseph Muller @mullr33

The successful software development companies of the future will be the fastest.

Once a week, I'll dive into something related to coding efficiency, project management, or feature implementation.

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Created with Revue by Twitter.