Know Your Widgets: Cupertino PageScaffold in Flutter

Well, no doubt that Flutter is all about widgets and just widget and Yes! we know that we have been emphasizing this point with greater importance but that’s what makes us fall in love with Flutter, isn’t it? By now you must have explored flutter.io  and will be aware of the fact that there are lots of widget in Flutter, I mean lot!. When you open the Flutters widget catalog you can see widgets distinguished on some category like Accessibility which enlists all the widgets focusing accessibility capability, Animation and Motion which enlists all the animation related widgets in the flutter, Basics which enlists all the basic widgets used in Flutter development and many more, you can explore more on Flutters widget catalog page.
Among this widget catalog category, you may come across a set of widgets called Cupertino(iOS-style widget) this set of widget enlists all the widgets which will help you design iOS native design in Flutter. This contains a handful of widgets which can help you build an iOS design based app using Flutter like CupertinoActivityIndicator, CupertinoAlertDialog, CupertinoButton, CupertinoDatePicker, etc all the widgets which give you a native feel of iOS. This is our second blog on Cupertino widgets, our first blog was on CupertinoActionSheet which you can read from here which helps you learn about the widget and its implementation in Flutter.

So, let’s start with CupertinoPageScaffold without much further ado. The very first genuine and curious question you might have is what is it? What is CupertinoPageScaffold? Don’t worry, as usual, we got it covered for you and that’s why we here.

What is CupertinoPageScaffold?

Well, we are aware of what Scaffold is in general and if you haven’t read about our scaffold blog please do so from here.
Basically, to brief you about it, Scaffold is what provides the structure to your app implementing material design layout. CupertinoPageScaffold is similar to that which provides you the structure to your iOS application page layout, targeting your iOS design. The Cupertino scaffold lays out the navigation bar on the top and the content between or behind the navigation bar.
Like, the Scaffold widget, CupertinoPageScaffold widget also has certain properties which help you build your UI. Let’s have a look at the CupertinoPageScaffold’s constructor to see what functionality it contains:

We can see what CupertinoPageScaffold contains, it contains a navigation bar, background color, a child and a resizeToAvoidBottomInset property, which we’ll discuss in detail. The constructor also tells us what property is must to have, using the @required tag, the child is mandatory when using the CupertinoPageScaffold, it also tells which property is already given a default value, like resizeToAvoidBottomInset which is set to true by default.
When using any widget it’s constructor always proves to be helpful giving us the heads up while developing, so do have a look.

CupertinoPageScaffold

Now, let’s explore each of their properties individually:

navigationBar:

The navigationBar is like the appBar in general, drawn at the top of the screen giving you the power to build accessibility feature for the app. navigationBar property uses the CupertinoNavigationBar widgets properties by using CupertinoNavigationBar. The CupertinoNavigationBar is itself a widget so we’ll talk about in an individual blog.

We basically made a simple and basic navigation bar which contains an icon on the left side, a text in the middle and another icon on the right side. This is the least of CupertinoNavigationBar properties that we have used, as we already said we won’t be discussing CupertinoNavigationbar widget in this blog. This line of code produces this screen:

Navigation Bar

backgroundColor:

The backgroundColor property, as the names say it provides the background color to the page. It takes the property of the Color class which takes the color using three different ways,

1. Color(int value): which takes the 32-bit color value
2. Color.fromARGB(int a, int r, int g, int b): it takes an Alpha ‘a'(which is used to set the transparency), Red color value, Green color value, and Blue color value.
3. Color.fromRGBO(int r, int g, int b, int o): it takes Red color value, Green color value, Blue color value, and Opacity value.

So, here we used the first way of using the color, you can use any of the three based on your requirement to give the background color. This gives the scaffold a grey color.

Grey background color

resizeToBottomInset:

This property tells whether the child of the scaffold should resize itself to avoid the window’s bottom inset. Let me explain it with you an example: You must have always come across the situation on every app where the keyboard pops up from the bottom and you start typing, this is the property that makes sure that your content doesn’t hide behind the on-screen keyboard and your app body should resize itself to avoid any overlapping. This property takes the boolean value and by default, it is set to true.

child:

This property enables you the take any other widget that is to be shown in the main content area. For example, you can take any widget in it, be it a text widget, icon widget, image widget, just to name the least.

Here, we took the text widget to display the text in the main content area.

Text as the child of CupertinoPageScaffold

So, this was all the properties of CupertinoPageScaffold and we hope that was sufficient to know about it, if you have any doubts or if we missed something then feel free to let us know. You can head over to https://flutter.dev to explore flutter.

If you want to read more about row and column head over to the flutter docs of CupertinoPageScaffold.

Related articles:
Keep exploring other widgets with FlutterDevs, from:

•  Know Your Widgets: Cupertino ActionSheet In Flutter
•  Know Your Widgets: Container In Flutter
•  Know Your Widgets: Scaffold
•  Know Your Widgets: Row and Column

 FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on hourly or full-time basis as per your requirement! You can connect with us on Facebook and Twitter for any flutter related queries.