CupertinoPopupSurface Widget – Flutter Widget Guide By Flutter Agency

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

Earlier we have been through CupertinoActionSheet Widget, CupertinoSlidingSegmentedControl Widget, CupertinoTabBar Widget all these widgets fall under the category of Cupertino Widget so now this is time for something new called CupertinoPopupSurface Widget.

Cupertino is a set of Flutter Widget helpful in implementing a current iOS design. Earlier we have learned about CupertinoPageScaffold Widget  so now in this tutorial we will CupertinoPopupSurface Widget is a rounded rectangle surface that looks like an iOS popup surface, e.g., alert dialog and action sheet.

What is CupertinoPopupSurface Widget?

A CupertinoPopupSurface Widget can be configured to paint or not paint a white color on top of its blurred area. Typical usage should paint white on top of the blur. However, the white paint can be disabled for the purpose of rendering divider gaps for a more complicated layout, e.g., CupertinoAlertDialog Widget. Additionally, the white paint can be disabled to render a blurred rounded rectangle without any color similar to iOS’s volume control popup.

Default Constructor will look like below:

CupertinoPopupSurfaceWidget({
  Key key,
  bool isSurfacePainted: true,
  Widget child,
});

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

Properties:

  • Key key: The widget key, used to control if it’s should be replaced.
  • bool isSurfacePainted: Whether or not to paint a translucent white on top of this surface’s blurred background. isSurfacePainted should be true for a typical popup that contains content without any dividers. A popup that requires dividers should set isSurfacePainted to false and then paint its own surface area. Some popups, like iOS’s volume control popup, choose to render a blurred area without any white paint covering it. To achieve this effect, isSurfacePainted should be set to false.
  • Widget child: The widget below this widget in the tree. Child Property will have only one child. To allocate multiple users needs to make use of Row Widget or Column Widget and consider it.

How to use CupertinoPopupSurface Widget in Flutter?

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

CupertinoPageScaffold(
      child: RaisedButton(
        child: Text("Click Me"),
        onPressed: () {
          showModalBottomSheet(
            context: context,
            builder: (
              BuildContext context,
            ) =>
                CupertinoPopupSurface(
              child: Center(
                child: Container(
                  height: 80,
                  width: 80,
                  color: Colors.orange,
                  child: Center(
                    child: Text(
                      "hello",
                    ),
                  ),
                ),
              ),
            ),
          );
        },
      ),
    );

The above code will give us output like below:

CupertinoPopupSurface Widget - Flutter Widget Guide By Flutter Agency

CupertinoPopupSurface Widget

Conclusion:

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

Thanks for reading !!!
Keep Fluttering.

FlutterAgency.com 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.

FlutterAgency.com 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 Reply