如何使对话框响应不同的屏幕尺寸？扑
Posted
技术标签:
【中文标题】如何使对话框响应不同的屏幕尺寸？扑【英文标题】：How to make dialog responsive for different screen sizes? Flutter 【发布时间】：2022-01-22 23:59:09 【问题描述】：对于除对话框之外的不同屏幕尺寸，Mediaquery 响应方法一切正常。随着设备屏幕尺寸变小，对话框出现像素溢出错误。我尝试了 FractionBox、Mediaquery、pub 包，但似乎没有任何东西适用于像素完美的对话框。代码如下。
代码
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,
),
),
),
),
),
],
),
),
),
);
,
);
【问题讨论】：
【参考方案1】：实际上你的对话框已经是屏幕responsive，但你得到的错误是因为你的content是你的dialog框的getting out，要解决这个问题只需让你的对话框Scrollable所以每当你的内容比dialog 的height 更多，你的content 不会出去。试试这个
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,
),
),
),
),
),
],
),
),
),
),
);
,
);
【讨论】：
【参考方案2】：移除容器的高度并添加到列中：
mainAxisSize: MainAxisSize.min
【讨论】：
以上是关于如何使对话框响应不同的屏幕尺寸？扑的主要内容，如果未能解决你的问题，请参考以下文章
在模拟器中或根据不同的屏幕尺寸将小部件定位在堆栈中的位置变化。扑