Everything is fitting okay with the Mediaquery responsiveness method for different screen sizes excluding the dialog. The dialog gets a pixel overflow error as the device screen size gets smaller. I tried FractionBox, Mediaquery, pub packages but nothing seems to work for pixel-perfect dialog. The code is as follows.
Code
buyDialog(BuildContext context) {
return showDialog(
context: context,
builder: (context) {
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
elevation: 10.0,
child: Expanded(
child: Container(
height: MediaQuery.of(context).size.height / 4.3,
// height: 23.5.h,
// height: 210,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(12.0),
),
child: Column(
children: [
Container(
decoration: BoxDecoration(
color: Colors.white,
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Colors.yellowAccent.shade100,
Colors.yellow,
Colors.yellow.shade600,
Colors.yellow.shade800,
],
),
shape: BoxShape.rectangle,
borderRadius: BorderRadius.only(
topRight: Radius.circular(12.0),
topLeft: Radius.circular(12.0),
),
),
child: Column(
children: [
//-------------------------------------- Pack Title
Padding(
padding: EdgeInsets.only(top: 1.h),
child: Shimmer.fromColors(
baseColor: Colors.grey.shade800,
highlightColor: Colors.grey.shade200,
period: Duration(seconds: 2),
child: Text(
'NSFW 18 Pack',
style: TextStyle(
fontSize: 17.sp,
color: Colors.grey.shade800,
fontWeight: FontWeight.bold,
fontFamily: 'NewYork',
letterSpacing: 1.0,
),
),
),
),
Divider(color: Colors.yellow.shade800),
//----------------------------------------------- Features
Container(
padding: EdgeInsets.symmetric(
vertical: 1.h, horizontal: 1.h),
child: Padding(
padding: EdgeInsets.only(bottom: 0.5.h),
child: Text(
'SFX set powerful enough to embarrass any individual on planet Earth.',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16.sp,
fontFamily: 'NewYork',
color: Colors.grey.shade800,
),
),
),
),
],
),
),
//------------------------------------ Buy Now
GestureDetector(
onTap: () {
_iapController.getIapProducts();
_firebaseAnalytics.logUnlockedTapped();
},
child: Container(
child: Padding(
padding: EdgeInsets.only(top: 1.h),
child: Text(
'Unlock',
style: TextStyle(
color: Colors.blue,
fontSize: 19.sp,
fontWeight: FontWeight.w600,
),
),
),
),
),
],
),
),
),
);
},
);
}
CodePudding user response：
Remove Container's height and add to Column this:
mainAxisSize: MainAxisSize.min
CodePudding user response：
Actually your dialog is already screen responsive but the error that you are getting is because your content is getting out of your dialog box, to solve this just make your dialog Scrollable so whenever your content is more then the height of the dialog your content will not go outside. Try this
buyDialog(BuildContext context) {
return showDialog(
context: context,
builder: (context) {
return SingleChildScrollView(
child: Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
elevation: 10.0,
child: Expanded(
child: Container(
height: MediaQuery.of(context).size.height / 4.3,
// height: 23.5.h,
// height: 210,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(12.0),
),
child: Column(
children: [
Container(
decoration: BoxDecoration(
color: Colors.white,
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Colors.yellowAccent.shade100,
Colors.yellow,
Colors.yellow.shade600,
Colors.yellow.shade800,
],
),
shape: BoxShape.rectangle,
borderRadius: BorderRadius.only(
topRight: Radius.circular(12.0),
topLeft: Radius.circular(12.0),
),
),
child: Column(
children: [
//-------------------------------------- Pack Title
Padding(
padding: EdgeInsets.only(top: 1.h),
child: Shimmer.fromColors(
baseColor: Colors.grey.shade800,
highlightColor: Colors.grey.shade200,
period: Duration(seconds: 2),
child: Text(
'NSFW 18 Pack',
style: TextStyle(
fontSize: 17.sp,
color: Colors.grey.shade800,
fontWeight: FontWeight.bold,
fontFamily: 'NewYork',
letterSpacing: 1.0,
),
),
),
),
Divider(color: Colors.yellow.shade800),
//----------------------------------------------- Features
Container(
padding: EdgeInsets.symmetric(
vertical: 1.h, horizontal: 1.h),
child: Padding(
padding: EdgeInsets.only(bottom: 0.5.h),
child: Text(
'SFX set powerful enough to embarrass any individual on planet Earth.',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16.sp,
fontFamily: 'NewYork',
color: Colors.grey.shade800,
),
),
),
),
],
),
),
//------------------------------------ Buy Now
GestureDetector(
onTap: () {
_iapController.getIapProducts();
_firebaseAnalytics.logUnlockedTapped();
},
child: Container(
child: Padding(
padding: EdgeInsets.only(top: 1.h),
child: Text(
'Unlock',
style: TextStyle(
color: Colors.blue,
fontSize: 19.sp,
fontWeight: FontWeight.w600,
),
),
),
),
),
],
),
),
),
),
);
},
);
}