CupertinoNavigationBar — All Cupertino Widgets

Tomic Riedel
3 min readNov 13, 2022

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!

--

--

Flutter Supabase — The Complete Crash Course

5 min read

Nov 4, 2022

The ultimate guide to testing in Flutter

5 min read

Aug 19, 2022

Flutter Sembast — The Complete Crash Course

3 min read

Aug 20, 2022

Flutter Isar Database — Part 6 — Transactions

3 min read

Aug 17, 2022

Fluter GoRouter — The Complete Crash Course

3 min read

Aug 20, 2022

Flutter Isar Database — part 5 — Advanced Querying

5 min read

Aug 16, 2022

Flutter logger — The complete crash course

4 min read

Aug 18, 2022

Flutter Isar Database — part 4 — Filter data

4 min read

Aug 16, 2022

Flutter FVM — Boost your Flutter productivity by 100%

4 min read

Aug 19, 2022

Flutter Dio explained — The complete crash course

3 min read

Aug 17, 2022

Tomic Riedel

Flutter, Dart & Appwrite Developer | Livelong learner | Happy about sharing my knowledge