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!

Happy reading!

CupertinoTabBar

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 List<BottomNavigationBarItem>. 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 with border, set the height and 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!