How to make dialog responsive for different screen sizes? Flutter
284
Solution 1
Remove Container's height and add to Column this:
mainAxisSize: MainAxisSize.min
Solution 2
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,
),
),
),
),
),
],
),
),
),
),
);
},
);
}
Author by
Shakun's
Updated on January 02, 2023Comments
-
Shakun's over 1 year
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, ), ), ), ), ), ], ), ), ), ); }, ); }