Cupertino TabBar In Flutter
We need to utilize the Cupertino tabbar with a CupertinoTabScaffold to naturally reflect new information when there is a tab change. We can likewise utilize the tabbar without the cupertinoTabScaffold. All things considered, we need to pay attention to tab changes physically. We need to call setState to refresh the ongoing Index with the chosen tab list to reflect new information.
Whenever there is an adjustment of a tab it will set off a difference in the navigator. Every navigator will have a different route stack. We can accomplish this sort of conduct by utilizing CupertinoTabView inside the tabBuilder of CupertinoTabScaffold.
This blog will explore the Cupertino TabBar In Flutter. We perceive how to execute a demo program. We are going to learn about how we can utilize Cupertino tabBar and also learn how to customize the widget using various properties in your flutter applications.
CupertinoTabBar class – cupertino library – Dart API
API docs for the CupertinoTabBar class from the Cupertino Library, for the Dart programming language.api.flutter.dev
Table Of Contents::
Introduction:
Cupertino tabbar is the only ios style bottom tabbar or bottom navigation bar in a flutter. A CupertinoTabBar widget allows us to add ios like tabbar to our application. It is like the bottom navigation bar in flutter for the android stage.
It shows a row of tabs where every tab will have a label and a symbol. The primary tab will be dynamic as a default. Every tab will be fabricated utilizing the BottomNavigationBarItem widget.
Demo Module ::
This demo video shows how to create a Cupertino tabBar in a flutter and shows how a Cupertino tabBar will work in your flutter applications. We will show a row of tabs with labels and icons. When the user press that tab then, only this screen will be shown at that time. It will be shown on your device.
Constructor:
To utilize CupertinoTabBar, you need to call the constructor underneath:
const CupertinoTabBar({
Key? key,
required this.items,
this.onTap,
this.currentIndex = 0,
this.backgroundColor,
this.activeColor,
this.inactiveColor = _kDefaultTabBarInactiveColor,
this.iconSize = 30.0,
this.height = _kTabBarHeight,
this.border = const Border(
top: BorderSide(
color: _kDefaultTabBarBorderColor,
width: 0.0, // 0.0 means one physical pixel
),
),
})
To make a Cupertino tabbar in flutter we need to utilize CupertinoTabBar class. We need to call the constructor of the class and give the required properties. Tabbar has just a single required property items. We ought to give a list of BottomNavigationBarItem(s) as values for items.
Properties:
There are some properties of CupertinoTabBar are:
- > items — This property is utilized to give items to the Cupertino tabbar. It takes a list of BottomNavigationBarItems as value.
- > onTap — This property is utilized for the callback function that will summon when the client taps on a tab. Inside this function, we will get the index of the chosen tab. We need to set this value to the currentIndex property and call setState to refresh the choice in UI. We can avoid this property assuming we utilize the tabbar with the cupertinoTabScaffold widget.
- > currentIndex — This property is utilized to show the as-of-now chosen tab. It takes an int as value. We can avoid this property assuming we utilize the tabbar with the cupertinoTabScaffold widget.
- > backgroundColor — This property is utilized to apply or change the background color of the tabbar. It takes CupertinoColors or Colors class consistent as value.
- > activeColor — This property is utilized to change the color of the active tab means the tab that is currently selected.
- > inactiveColor — This property is utilized to change the color of the inactive tab means the tab that is not selected.
- > iconSize — This property is utilized to change the size of the icon of the tabbar. It takes double as value.
- > border — This property is utilized to provide a border to the tabbar. It takes Border class as the value.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
In the main. dart file, we will create a MyHomePage class. In this class. we will first let’s declare a list that will hold the widgets for the tabs.
List<Widget> data = [const HomeScreenTab(), const ProfileScreenTab()];
In the body, we will add the CupertinoTabScaffold to the child of the CupertinoPageScaffold widget. Give CupertinoTabBar to tabbar property of CupertinoTabScaffold.
Give a callback function to the tabBuilder property of the CupertinoTabScaffold widget. This callback function will give the index of the as-of-now chosen tab. Return the widget in light of the file inside the callback function.
CupertinoTabScaffold(
tabBar: CupertinoTabBar(
backgroundColor: Colors.blueGrey,
activeColor: Colors.white,
inactiveColor: Colors.grey,
items: const [
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.home),
label: "Home",
),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.person),
label: "Profile",
)
],
),
tabBuilder: (context, index) {
return CupertinoTabView(
builder: (context) {
return data[index];
},
);
},
)
Create a new dart file called HomeScreenTab.dart inside the lib folder.
In this HomeScreenTab class, we will return the Material method. In this method, we will add a column widget. In this widget, we will add an image and the Text “This is Home Page”.
class HomeScreenTab extends StatelessWidget {
const HomeScreenTab({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Material(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset("assets/logo.png",height: 270,width: 350,),
const Text(
"This is Home Page",
style: TextStyle(fontSize: 20),
),
],
),
);
}
}
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Create a new dart file called ProfileScreenTab.dart inside the lib folder.
In this ProfileScreenTab class, we will return the Material method. In this method, we will add a column widget. In this widget, we will add an image and the Text “This is Profile Page”.
class ProfileScreenTab extends StatelessWidget {
const ProfileScreenTab({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Material(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset("assets/powered_by.png",height: 270,width: 400,),
const Text(
"This is Profile Page",
style: TextStyle(
fontSize: 20,
),
),
],
),
);
}
}
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_cupertino_tabbar_demo/splash_screen.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blueGrey,
),
debugShowCheckedModeBanner: false,
home: const Splash(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() {
return _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage> {
List<Widget> data = [const HomeScreenTab(), const ProfileScreenTab()];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Flutter Cupertino TabBar Demo"),
centerTitle: true,
automaticallyImplyLeading: false,
),
body: CupertinoTabScaffold(
tabBar: CupertinoTabBar(
backgroundColor: Colors.blueGrey,
activeColor: Colors.white,
inactiveColor: Colors.grey,
items: const [
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.home),
label: "Home",
),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.person),
label: "Profile",
)
],
),
tabBuilder: (context, index) {
return CupertinoTabView(
builder: (context) {
return data[index];
},
);
},
)
);
}
}
class HomeScreenTab extends StatelessWidget {
const HomeScreenTab({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Material(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset("assets/logo.png",height: 270,width: 350,),
const Text(
"This is Home Page",
style: TextStyle(fontSize: 20),
),
],
),
);
}
}
class ProfileScreenTab extends StatelessWidget {
const ProfileScreenTab({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Material(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset("assets/powered_by.png",height: 270,width: 400,),
const Text(
"This is Profile Page",
style: TextStyle(
fontSize: 20,
),
),
],
),
);
}
}
Conclusion:
In the article, I have explained the Cupertino TabBar basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Cupertino TabBar On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying the Cupertino TabBar in your flutter projects. We will show you what the Introduction is. What are the construction and properties of Cupertino TabBar, make a demo program for working Cupertino TabBar in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
