flutter layout appbar bottombar overflow

Question

我的应用程序的每个页面都有一个应用栏和一个底部栏小部件。

在其中一个页面中，我想在一列中显示一个 Text 小部件和一个 WebView 小部件，其中 Text 小部件的高度为 30dp，而 WebView 填充左侧 space。

但是，考虑到 appbar 和 bottombar 的大小，我想不出一种方法来填充 WebView。

          return Column(
            children: [
              Container(
                height: 30,
                child: Text(
                  "alarm : ${_Message().toString()}",
                  style: TextStyle(fontSize: 15),
                ),
              ),
              Container(
                height: MediaQuery.of(context).size.height * 0.7, <- hard coded
                child: WebView(
                  initialUrl:
                      url,
                  javascriptMode: JavascriptMode.unrestricted,
                  onWebViewCreated:
                      (WebViewController webViewController) async {
                    _controller.complete(webViewController);
                  },
                ),
              )
            ],
          );

现在 webview 是硬编码的。

我该如何修改密码？

Answer 1

      return Column(
                children: [
                  Container(
                    height: 30,
                    child: Text(
                      "alarm : ${_Message().toString()}",
                      style: TextStyle(fontSize: 15),
                    ),
                  ),
                 Expanded(
                    child:Container(
                      child: WebView(
                      initialUrl:
                          url,
                      javascriptMode: JavascriptMode.unrestricted,
                      onWebViewCreated:
                          (WebViewController webViewController) async {
                        _controller.complete(webViewController);
                      },
                    ),
                  ),)
                ],
              );

flutter layout appbar bottombar overflow

flutter layout appbar bottombar overflow

layout

flutter

flutter-layout