My app has an appbar and a bottombar widget for every page.

In one of the pages, I wanted to show a Text widget and a WebView widget in a column, where the Text widget has a height of 30dp and the WebView to fill up the left over space.

However, I cannot think of a way to fill the WebView considering the size of appbar and bottombar.

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

right now the webview is hard coded.

How should I change the code?

CodePudding user response：

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