CupertinoSliverNavigationBar — 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!

CupertinoSliverNavigationBar

CupertinoSliverNavigationBar is an iOS-styled navigation bar, similar to CupertinoNavigationBar. The difference is, that the CupertinoSliverNavigationBar is on scrolling pages a lot, because it shows a big title if you are at the top, but when scrolling, the title will nicely transition into a smaller one. Now that we’ve discussed the basics, let’s dive into the properties!

Let’s start with the largeTitle property. As the name suggests, this is the widget that is the large title when not scrolling. It’s typically a Text widget with the title page. There is also the middle property, this one is the replacement for largeTitle when the user is currently scrolling for example. BUT, you don’t have to specify the middle property. If you don’t specify it, the largeTitle property will be used in both situations.

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…).

There is also the previousPageTitle property, where you can manually specify the previous route’s title when the leading back button automatically implies. Speaking of which, there is also the automaticallyImplyLeading and automaticallyImplyTitle property.
Also important for routing is the heroTag property, which is the tag for the navigation bar’s Hero widget if transitionBetweenRoutes (yep, also a new property) is true.

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.

But for now, let’s take a look at an example:

Quite easy, right?

Further reading & Conclusion

In this article, you have learned how to use the CupertinoSliverNavigationBar.

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!