Cupertino Popup Surface In Flutter
Cupertino is a bunch of Flutter Widgets supportive of carrying out an ongoing iOS plan. A CupertinoPopupSurface can be designed to paint or not paint a white variety on top of its obscured region. Typical use ought to paint white on top of the haze.
In any case, the white paint can be disabled to deliver divider holes for a more complicated design, e.g., CupertinoAlertDialog Widget. Moreover, the white paint can be disabled to deliver an obscured adjusted square shape with next to no variety like iOS’s volume control popup.
This article will explore the Cupertino Popup Surface In Flutter. We will see how to implement a demo program. We will learn how to use the Cupertino popup surface in flutter and also learn how to customize the CupertinoPopupSurface widget using different properties in your flutter applications.
CupertinoPopupSurface class – Cupertino library – Dart API
API docs for the CupertinoPopupSurface class from the Cupertino library, for the Dart programming language.api.flutter.dev
Table Of Contents::
What is Cupertino Popup Surface?
What is Cupertino Popup Surface?
Cupertino popup surface in flutter is only an ios-like popup surface or bottom sheet. CupertinoPopupSurface widget allows us to make a popup surface like ios. It is like the bottom sheet in android. A popup surface will show over the items on the screen.
This conduct will assist us with showing extra details on a similar screen without exploring another screen. When the popup surface seems like we can’t communicate with different parts of the screen.
We can excuse it by tapping outside the popup surface or by utilizing Navigator. pop(). For the most part, we will utilize popup surfaces in cases like altering data or sharing content, and so on.
Demo Module ::
This demo video shows how to use a Cupertino popup surface in a flutter and shows how a Cupertino popup surface will work in your flutter applications. We will show a popup over the content on the screen. It will be shown on your device.
Constructor:
To utilize CupertinoPopupSurface, you need to call the constructor underneath:
const CupertinoPopupSurface({
Key? key,
this.isSurfacePainted = true,
this.child,
})
We need to call the constructor of CupertinoPopupSurface class and give the necessary properties. The CupertinoPopupSurface widget has no necessary properties. Since it is a waste of time to show an empty popup surface we need to add the child.
Properties:
There are some properties of CupertinoPopupSurface are:
- > key — This property is used to control if it should be replaced.
- > isSurfacePainted — This property has utilized the choice of whether to paint a clear white on top of this surface’s obscured background. isSurfacePainted ought to be true for a regular popup that contains content with practically no dividers. A popup that requires dividers ought to set isSurfacePainted to false and afterward paint its surface region. Some pop-ups, similar to iOS’s volume control popup, decide to deliver an obscured region with practically no white paint covering it. To accomplish this impact, isSurfacePainted ought to be set to false.
- > child — This property has been utilized to the widget below this widget in the tree. Child Property will have only one child. To allocate multiple users need to make use of the Row Widget or Column Widget and consider it.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
In the main. dart file, we will create a new class MyHomePage(). In this class, we will add the body part. In this body, we will add a Container widget with margin, width, height, and alignment. For its child, we will add crossAxisAlignment and mainAxisAlignment as the center.
Container(
margin: const EdgeInsets.all(30),
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.50,
alignment: Alignment.center,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
"assets/logo.png",
height: 300,
width: 350,
),
const SizedBox(height: 40,),
ElevatedButton(
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.all(15),
textStyle: const TextStyle(
fontSize: 16,),
),
onPressed: () {
showPopup();
},
child: const Text("Show Cupertino Popup Surface"),
),
])),
We will add an image and an elevated button. In this button, we will add the onPressed method. In this method, we will add the showPopup() method. We will describe it below.
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Now, deeply describe the showPopup() method are:
In the showPopup() method, we will add showCupertinoModalPopup widget. In this widget, we will add context and a builder. In builder, we will return the CupertinoPopupSurface widget. In this widget, we will add isSurfacePainted was true.
void showPopup() {
showCupertinoModalPopup(
context: context,
builder: (BuildContext builder) {
return CupertinoPopupSurface(
isSurfacePainted: true,
child: Container(
padding: const EdgeInsetsDirectional.all(20),
color: CupertinoColors.white,
alignment: Alignment.center,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).copyWith().size.height * 0.35,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Image.asset(
"assets/img.png",
height: 160,
width: 250,
),
const Material(
child: Text(
"Are You Flutter Developer?",
style: TextStyle(
color: CupertinoColors.black,
fontSize: 18,
),
)),
const SizedBox(height: 5,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text("NO")),
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text("YES")),
]),
],
)),
);
});
}
We will add the column widget. In this widget, we will add an image and text. Also, we will add a row widget on the same column. In this widget, we will add two ElevatedButton. When the user presses the button, then the popup show on your screen.
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_cupertino_popup_surface_demo/splash_screen.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blueGrey,
),
debugShowCheckedModeBanner: false,
home: const Splash(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() {
return _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Flutter Cupertino Popup Surface Demo"),
automaticallyImplyLeading: false,
backgroundColor: Colors.blueGrey,
),
body: Container(
margin: const EdgeInsets.all(30),
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.50,
alignment: Alignment.center,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
"assets/logo.png",
height: 300,
width: 350,
),
const SizedBox(
height: 40,
),
ElevatedButton(
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.all(15),
textStyle: const TextStyle(
fontSize: 16,
),
),
onPressed: () {
showPopup();
},
child: const Text("Show Cupertino Popup Surface"),
),
])),
);
}
void showPopup() {
showCupertinoModalPopup(
context: context,
builder: (BuildContext builder) {
return CupertinoPopupSurface(
isSurfacePainted: true,
child: Container(
padding: const EdgeInsetsDirectional.all(20),
color: CupertinoColors.white,
alignment: Alignment.center,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).copyWith().size.height * 0.35,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Image.asset(
"assets/img.png",
height: 160,
width: 250,
),
const Material(
child: Text(
"Are You Flutter Developer?",
style: TextStyle(
color: CupertinoColors.black,
fontSize: 18,
),
)),
const SizedBox(
height: 5,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text("NO")),
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text("YES")),
]),
],
)),
);
});
}
}
Conclusion:
In the article, I have explained Cupertino Popup Surface’s basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Cupertino Popup Surface On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying the Cupertino Popup Surface in your flutter projects. We will show you what the Introduction is. Make a demo program for working with Cupertino Popup Surface and you’ve learned how to create & use Cupertino Popup Surface in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
