I am trying to design my dialog like in the picture below.
However, I can’t seem to wrap my head around how to do it. Because I am new started in Flutter.
Below is my code:
showDialog(
barrierDismissible: false,
context: context,
builder: (BuildContext context) {
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)), //this right here
child: Wrap(
children: [
Container(
child: Padding(
padding: const EdgeInsets.only(
right: 16,
left: 16,
top: 32,
bottom: 16,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Lottie.asset(
"assets/animations/no_connection.json",
height: 180,
),
SizedBox(
height: 8,
),
CustomText(
"description",
fontWeight: FontWeight.bold,
fontSize: 14,
),
SizedBox(
height: 32,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: 120.0,
child: ElevatedButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(kOrange),
),
onPressed: () async {
getData();
getVipStatus();
Navigator.of(context).pop();
},
child: FittedBox(
fit: BoxFit.fitWidth,
child: CustomText(
"try",
color: Colors.black,
),
),
),
),
],
),
],
),
),
),
],
),
);
});
I am a beginner in Flutter programming language, I used to work with Java. I put my code in the description section and I try to use the photo inside the frame, the photo will move to the top of the frame. I have shown an example of it in the description section.
>Solution :
You can follow this snippet
showDialog(
context: context,
builder: (context) {
final size = MediaQuery.of(context).size;
return Center(
child: Dialog(
backgroundColor: Colors.transparent, //must have
elevation: 0,
child: SizedBox(
height: size.height * .6,
child: Stack(
children: [
Positioned(
top: (size.height * .2) / 2,
child: Container(
height: size.height * .5,
width: size.width * .9,
color: Colors.red,
)),
Align(
alignment: Alignment.topCenter,
child: Container(
height: size.height * .2,
width: size.height * .2,
decoration: ShapeDecoration(
shape: CircleBorder(),
color: Colors.yellow,
),
),
),
],
),
)),
);
},
);
It will provide like below, play with the value
