CupertinoPageScaffold Widget – Flutter Widget Guide By Flutter Agency

· 4 min read
CupertinoPageScaffold Widget - Flutter Widget Guide By Flutter Agency
CupertinoPageScaffold Widget - Flutter Widget Guide By Flutter Agency

Basically, Scaffold Widget is what provides the structure to your app implementing material design layout. CupertinoPageScaffold Widget 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.

What is CupertinoPageScaffold Widget in Flutter?

Like, the Scaffold Widget, CupertinoPageScaffold Widget also has certain properties that help you build your UI.

Default Constructor for CupertinoPageScaffold will look like below:

  Key key,
  ObstructingPreferredSizeWidget navigationBar,
  Color backgroundColor,
  bool resizeToAvoidBottomInset: true,
  @required Widget child,

In Above Constructor all Fields marked with @required must not be empty.


  • Key key: Controls how one widget replaces another widget in the tree.
  • Color backgroundColor: The color of the Widget that underlies the entire Scaffold.
  • bool resizeToAvoidBottomInset: Whether the child should size itself to avoid the window’s bottom inset. For example, if there is an onscreen keyboard displayed above the scaffold, the body can be resized to avoid overlapping the keyboard, which prevents widgets inside the body from being obscured by the keyboard. The default value will be true and it can not be null.
  • navigationBar: The navigationBar is like the appBar in general, drawn at the top of the screen giving you the power to build accessibility features for the app. navigation bar property uses the CupertinoNavigationBar Widget properties by using CupertinoNavigationBar.The CupertinoNavigationBar is itself a Widget so we’ll discuss it about in a particular blog.

In Material Design we were using Scaffold like below:

class HomeScreen extends StatelessWidget { 
  Widget build (BuildContext context) { 
    return Scaffold ( 
      appBar: AppBar ( 
        title: Text ( "Scaffold Widget Example" ), 
      body: Container ( 
        child: Center ( 
          child: Text ( "Scaffold Widget Material Design" ), 

How to use CupertinoPageScaffold Widget in Flutter?

The following code snippet tells us how to implement AnimatedDefaultTextStyle Widget in Flutter.

return CupertinoPageScaffold(
  navigationBar: CupertinoNavigationBar(
    middle: Text("Cupertino Page Scaffold"),
  child: Center(
    child: Text("Cupertino Page Scaffold"),

We will get output like below:

CupertinoPageScaffold Widget - Flutter Widget Guide By Flutter Agency

CupertinoPageScaffold Widget


In this article, we have been through What is CupertinoPageScaffold Widget in Flutter along with how to implement it in a Flutter.

Thanks for being with us on a Flutter Journey!!!

Do let us know your suggestion/feedback to serve you better. is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc. is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a comment

Your email address will not be published. Required fields are marked *