如何使对话框响应不同的屏幕尺寸？扑

Question

除对话框外，对于不同的屏幕尺寸，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,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    },
  );
}

Answer 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,
                             ),
                           ),
                         ),
                       ),
                     ),
                   ],
                 ),
               ),
             ),
           ),
         );
       },
     );
   }

Answer 2

删除 Container 的高度并添加到列中：

mainAxisSize: MainAxisSize.min