Search code examples
flutterlayoutflutter-layout

flutter layout appbar bottombar overflow


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?


Solution

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