Flutter Segmented Control and Tab Bar in android and ios

Sarim Khan
2 min readMay 25, 2019

--

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy and segmented control is a linear set of two or more segments , Segmented controls are often used to display different views. To implement tabs and segmented control in flutter we will first use the foundation package like this:

Then in our main.dart file we will check if the platform is android or ios.

and then in our homepage we will display out tab bar or segmented control according to our the desired platform.

In Scafold(Android) the tabbar take a tab widgets which can have an icon or text as a widget and the body of Scafold we can TabBarView widget where we can give a list of widgets to display according to the selected tab.

Android tabs

In CupertinoPageScafold(IOS) SegmentedControtWidget the children takes a map of <int , widget> , groupvalue takes an int and in onvaluechange we change the state of our app and if the selectedvalue is 0 FirstIOSPage will be displayed and secondIOSPage will be displayed if it is 1

IOS Segmented control

--

--