CupertinoTabBar — All Cupertino Widgets
In this series, we look at the whole Cupertino package of Flutter. You will get to know every widget, important classes, and much more in this series. All the articles will be less than 2 minutes long, so you can read them every time :) In addition to that, they will be very easy to understand, following the motto:
Make everything as simple as possible, but not simpler. ~ Albert Einstein
If you want to check out the other articles of this series, check out this list. Let’s get started!
CupertinoTabBar is usually used in a
CupertinoTabScaffold, that supports multiple tabs. It basically works just like a normal tab bar but in the modern Cupertino style. So let’s take a look at it now.
First, specify all the
items in your tab bar with a
BottomNavigationBarItems are the same
BottomNavigationBarItems that you have in a normal tab bar. So there is nothing new here. Just so you know: When specifying the Icon in the
BottomNavigationBarItem, I recommend you use
CupertinoIcons. This gives your app an even more Cupertino look. But we will talk about
CupertinoIcons in another article again. Let’s take a look at the customizations of the tab bar.
There are three different colors that you can specify.
activeColor for the color of the icon that is active,
inactiveColor for the color of the icons that are inactive, and
backgroundColor, for the background of the tab bar. You can use normal
Color class, but I also recommend here using
CupertinoColor. You can read more about them here.
There are even more customization options. For example, you can set the
border, set the
iconSize property to a
double or specify a
ValueChanged<int> callback with
onTap. Great, right?
Okay, now let us look at an example:
Further reading & Conclusion
In this article, you have learned how to use the CupertinoTabBar widget.
Did you know that there are great packages that enhance your development enormously? For example Freezed, Isar, or Flutter Hooks. If you want to learn about these great packages, I have entire tutorials about them. Check them out here.
In the following few articles, I will introduce more Cupertino widgets, essential classes, and more stuff. If you don’t want to miss this, I recommend you follow me!
Thanks for reading, have a nice day!