Welcome to How do I series…
In this blog post, we’ll learn, how to create a Tab bar without DefaultTabBarController, in Flutter.
In this Example, we will be using Cupertino package for using CupertinoSegmentedControl. So create a new class named tab_screen.dart and import
import ‘package:flutter/cupertino.dart’;
Create a Stateful widget by name TabScreen, your code should look like this.
Now, in the main.dart file, modify body parameter as
body: TabScreen()
Save and check your device. it should show 3 tabs. We are now ready to configure this segment control or tab bar control.
Add a variable to store the index of tab, configure Segment control with variety of colors and implement method definition for _tabChanged. Your code should look like this.
Now start playing with Tabs. It’s time to implement the Tab view, for the selected tab.
Create 3 new classes Bike, Car, Plane.
Wrap CupertinoSegmentedControl in Column, so that our view can be second child in the column. Add implementation for our selected view like this.
Now run on your device. You should get this.
That’s it. You are done.
Add-ons:
Tip 1: Use Expanded to occupy the remaining space of column. So, the code would be
Expanded(child: _showSelectedView()),
Tip 2: As segment takes Tab as input, you can use icons like this.
Tab(child: Icon(Icons.bike_scooter)),
You can find the source code for the project here
Please share if you like it. Follow, to receive occasional updates.