Flutter modal 底片全高答案

【问题标题】：Flutter modal bottom sheet full heightFlutter modal 底片全高
【发布时间】：2021-01-10 22:24:50
【问题描述】：

我正在尝试使用ModalBottomSheet。如何为模态表实现 90% 的设备屏幕尺寸高度。我做了媒体查询，但它仍然没有给我超过一半的屏幕尺寸。我该如何解决？

代码如下：

class _TestFileState extends State<TestFile> {
  modalSheet() {
    showModalBottomSheet(
        context: context,
        backgroundColor: Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(15.0), topRight: Radius.circular(15.0)),
        ),
        builder: (context) {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              ListTile(
                leading: Icon(Icons.email),
                title: Text('Send email'),
                onTap: () {
                  print('Send email');
                },
              ),
              ListTile(
                leading: Icon(Icons.phone),
                title: Text('Call phone'),
                onTap: () {
                  print('Call phone');
                },
              ),
            ],
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Center(child: Text('Testing Modal Sheet')),
        ),
        body: Center(
          child: InkWell(
            onTap: () {
              modalSheet();
            },
            child: Container(
                color: Colors.indigo,
                height: 40,
                width: 100,
                child: Center(
                  child: Text(
                    'Click Me',
                    style: TextStyle(color: Colors.white),
                  ),
                )),
          ),
        ),
      ),
    );
  }
}

这是输出：

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

你必须通过 isScrollControlled: true 并使用下面给出的 mediaquery

showModalBottomSheet(
            isScrollControlled: true,
            context: context,
            builder: (context) {
              return Container(
                height: MediaQuery.of(context).size.height * 0.5,
                color: Colors.red,
                //height: MediaQuery.of(context).size.height,
              );
            });

【讨论】：

对此表示感谢。我不知道 isScrollControlled。

【解决方案2】：

我记得这是对 Flutter 模态底页本机实现的限制。

您可以使用包modal_bottom_sheet 来实现。

安装：

dependencies:
  modal_bottom_sheet: ^0.2.2

还有最小的例子：

showMaterialModalBottomSheet(
  context: context,
  expand: true, //this param expands full screen
  builder: (context, scrollController) => Container(),
)

【讨论】：

感谢您的快速回复:)