CupertinoNavigationBar — All Cupertino Widgets

In this series, we look at the whole Cupertino package of Flutter. You will get to know every widget, crucial class, 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 effortless 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!

CupertinoNavigationBar

The CupertinoNavigationBar is an iOS-styled navigation bar. If you use a material Scaffold, it is called ApBar. Now know what I mean ;)?

There are many different properties, but I will just show you the most important ones. So let’s start with the middle property. As the name suggests, this is the widget that is placed in the middle of your navigation bar. It’s typically a Text widget with the title page.

The leading property specifies the widget that is at the beginning of the navigation bar. This is typically a back button or a close button in a full-screen dialog. Read more about it here.

And what’s missing now? Right, the widget for the end of your navigation bar. This is our trailing property. Normally it’s something for additional actions on the page (search, edit…).

Great, these were our widget properties. Now let’s talk about customization. You can set the background color with backgroundColor and the border with border of type Border. You can also set the brightness (Type Brightness) to set if the brightness is set to light or dark. The last customization that we want to take a look at is padding. Yep, very basic, you just set the padding for the contents of the navigation bar there.

There are some other properties, but we won’t take a look at them. But if you want to know more about them, check out this documentation article.

Now let’s finally take a look at CupertionNavigationBar:

Further reading & Conclusion

In this article, you have learned how to use the CupertinoNavigationBar 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!