Add a Tab Bar and Navigation Bar with iOS style in your next Flutter app

If you come from iOS and you are used to working with Swift you probably know it is super easy in xCode to add a Tab Bar in your app using the storyboard: you just drag it to your screen and voila it’s done! The main benefit of a iOS Tab Bar is that it allows you multi tasking. In iOS as you select tabs and descend into multiple viewcontrollers the app saves your state. If you move in a new tab the app still keeps the state of the other tab alive and when you change tabs back to the first one you are still at that same descended view.

Flutter makes a BottomNavigationBar class available to you however this comes with a typical Android single tasking behaviour: if you move from one tab to the other you basically lose the state in the other tab and if you go back to your original tab, you start from the begining. There are some solution you may want to explore that deal with Activities and Fragments and maintaining their states however these are all very complex solution

Today I am going to show you how to easily add a iOS like Tab in your flutter app. We are going to achieve it by leveraging the CupertinoTabBar class

Overview of Tab structures

Before jumping to the code I would like to provide you a representation of how the…