Flutter TabBar Example – WeightTracker 5
In this short post, I will document how I added TabBar to my WeightTracker app.
Note: I am using Redux to populate data to view, if you are not familiar with Redux, just ignore StoreConnector widget and focus only on Builder body which can be treated like normal build function.
In order to add Tabs to the application, all I needed was to create TabBar and TabBarView and attach TabController to them. TabController will sync TabBar with TabBarView so we can have the behavior we wanted.
. . .
However, I didn’t want the title widget to stick on the top of the screen forever. To add nice hiding behavior, I introduced NestedScrollView with SliverAppBar:
And that’s it.
If you are interested in the full code shown in this post, see my GitHub repository. 
Cheers! ?
Marcin Szałek
Founder of Fidev
Flutter enthusiast since Alpha release in 2017. Believes that sharing is caring, which lead him to start a technical blog dedicated fo Flutter in its early days. Loves to see beautiful designs become real apps and is willing to help make it happen. Enjoys sunny beaches far from home.
Join the newsletter!
Join the newsletter to keep track with latest posts and get my special Widget to animate views' entrances without any hassle for FREE!
Check out other posts!
Stripe Checkout in Flutter Web
Flutter Web is getting more mature every day. If you want to accept payments using Stripe Checkout in your Flutter web application, this article is just for you!
Stripe Checkout in mobile Flutter app
Have you ever struggled to integrate card payments into your mobile Flutter app? If so, today is your lucky day! In this post, I present how to use Stripe Checkout in the Flutter app without any hassle!
Interacting with Widgets using Framy
Have you ever developed a widget or a page and you wanted to make sure it works correctly in different scenarios but then it turned out that you can’t just reproduce all the cases you want to cover? Framy may solve such problems!
Thanks for this great article. I found a problem:
If the child page, for example StatisticsPage(), has a ListViewBuilder, the title cannot be hidden when I scroll up the list.
Could you please give a suggestion? Thank you.
I use ListViewBuilder there too, but you need to set shrinkWrap parameter to true so that ListView doesn’t just expand. Look at the full code (link at the bottom of post) for the reference 🙂