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