调整拍打底片

Question

我的应用程序中有一个底页，对于尺寸为5 +的手机来说，它正确显示了，但是当我在较小尺寸的屏幕手机上运行时，会出现如下图所示

问题在于填充物越过范围，是否有其他替代方法可用于创建底页，并且其内容大小应特定于设备？如何自动调整字体大小，以及如何根据特定设备进行填充。

下面是相同的代码

showModalBottomSheet<void>(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
        context: context,
        isScrollControlled: true,
        builder: (BuildContext context) {
          return FractionallySizedBox(
              heightFactor: 0.2,
              child: Padding(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 22.0,
                    vertical: 14.0,
                  ),
                  child: Column(
                    children: <Widget>[
                      ListTile(
                          leading: Icon(Icons.remove_red_eye),
                          title: Text(
                            "View",
                            overflow: TextOverflow.ellipsis,
                            textAlign: TextAlign.justify,
                            maxLines: 1,
                            style: TextStyle(
                              fontSize:
                                  ScreenUtil(allowFontScaling: true).setSp(50),
                            ),
                          ),
                          onTap: () {
                            Navigator.of(context).pop();
                            setGenerateReportView(context, count, data);
                          }),
                      ListTile(
                          leading: Icon(Icons.file_download),
                          title: Text(
                            "Download",
                            overflow: TextOverflow.ellipsis,
                            textAlign: TextAlign.justify,
                            maxLines: 1,
                            style: TextStyle(
                              fontSize:
                                  ScreenUtil(allowFontScaling: true).setSp(50),
                            ),
                          ),
                          onTap: () => {
                                Toast.show("Downloading", context,
                                    duration: Toast.LENGTH_LONG,
                                    gravity: Toast.BOTTOM),
                                Navigator.of(context).pop()
                              }),
                    ],
                  )));
        });

谢谢。

Answer 1

检查下面的代码在5以下是否可以正常工作

   showModalBottomSheet(
          backgroundColor: Colors.transparent,
          context: context,
          builder: (builder) {
            return ClipRRect(
              borderRadius: BorderRadius.only(
                  topLeft: const Radius.circular(30.0),
                  topRight: const Radius.circular(30.0)),
              child: new Container(
                height: MediaQuery.of(context).size.height / 5,
                color: Colors.white,
                child: new Column(
                  children: <Widget>[
                    ListTile(
                        leading: Icon(Icons.remove_red_eye),
                        title: Text(
                          "View",
                          overflow: TextOverflow.ellipsis,
                          textAlign: TextAlign.justify,
                          maxLines: 1,
                        ),
                        onTap: () {
                          Navigator.of(context).pop();
                        }),
                    ListTile(
                        leading: Icon(Icons.file_download),
                        title: Text(
                          "Download",
                          overflow: TextOverflow.ellipsis,
                          textAlign: TextAlign.justify,
                          maxLines: 1,
                        ),
                        onTap: () {
                          Navigator.of(context).pop();
                        }),
                  ],
                ),
              ),
            );
          });