I am trying to add global vertical scroll to page. But I am getting only scroll for bottom element.

Original code:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Obx(() => Column(
            children: [
              Padding(

                padding: EdgeInsets.symmetric(horizontal: (Get.find<SearchFormController>().searchFormModelHistoryList.length == 0) ? 260.0 : 15.0),
                child: Row(children: [
                  Expanded(
                    flex: 1,
                    child: Container(
                      color: Color.fromARGB(255, 255, 252, 234),
                      margin: const EdgeInsets.only(left: 20.0, top: 20.0, right: 20.0),
                      child: SearchForm(),
                    ),
                  ),
                  Visibility(
                    // visible: !  state.getListApiCalled ? true : false,

                    visible: (Get.find<SearchFormController>().searchFormModelHistoryList.length > 0) ? true : false,
                    child: Expanded(
                      // flex: 1, child: Text('List 2'),
                      flex: 1, child: QueriesHistoryForm(),
                    ),
                  ),
                ]),
              ),

              Expanded(
                child: WebView(
                  initialUrl: 'http://localhost/index.html',
                  onWebViewCreated: (WebViewController controller) {
                    _webViewController.complete(controller);
                  },
                ),
              ),

            ],
          )),
    );
  }
}

I tried to wrap Column in SingleChildScrollView

Code:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Obx(() => SingleChildScrollView(
        child: Column(
              children: [
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: (Get.find<SearchFormController>().searchFormModelHistoryList.length == 0) ? 260.0 : 15.0),
                  child: Row(children: [
                    Expanded(
                      flex: 1,
                      child: Container(
                        color: Color.fromARGB(255, 255, 252, 234),
                        margin: const EdgeInsets.only(left: 20.0, top: 20.0, right: 20.0),
                        child: SearchForm(),
                      ),
                    ),
                    Visibility(
                      // visible: !  state.getListApiCalled ? true : false,
                      visible: (Get.find<SearchFormController>().searchFormModelHistoryList.length > 0) ? true : false,
                      child: Expanded(
                        flex: 1, child: QueriesHistoryForm(),
                      ),
                    ),
                  ]),
                ),
      
                Expanded(
                  child: SizedBox(
                    height: 700,
                    child: WebView(
                      initialUrl: 'http://localhost/index.html',
                      onWebViewCreated: (WebViewController controller) {
                        _webViewController.complete(controller);
                      },
                    ),
                  ),
                ),
      
              ],
            ),
      )),
    );
  }
}

But got an error:

RenderFlex children have non-zero flex but incoming height constraints are unbounded.
When a column is in a parent that does not provide a finite height constraint, for example if it is
in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a
flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
space in the vertical direction.

What I am doing wrong? How to get global scroll work?

CodePudding user response：

Remove expanded widget. An expanded widget will need a bound which it takes from its parent widget. More about expanded

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Obx(() => SingleChildScrollView(
        child: Column(
              children: [
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: (Get.find<SearchFormController>().searchFormModelHistoryList.length == 0) ? 260.0 : 15.0),
                  child: Row(children: [
                    Expanded(
                      flex: 1,
                      child: Container(
                        color: Color.fromARGB(255, 255, 252, 234),
                        margin: const EdgeInsets.only(left: 20.0, top: 20.0, right: 20.0),
                        child: SearchForm(),
                      ),
                    ),
                    Visibility(
                      // visible: !  state.getListApiCalled ? true : false,
                      visible: (Get.find<SearchFormController>().searchFormModelHistoryList.length > 0) ? true : false,
                      child: Expanded(
                        flex: 1, child: QueriesHistoryForm(),
                      ),
                    ),
                  ]),
                ),
      

                  SizedBox(
                    height: 700,
                    child: WebView(
                      initialUrl: 'http://localhost/index.html',
                      onWebViewCreated: (WebViewController controller) {
                        _webViewController.complete(controller);
                      },
                    ),
                  ),
      
              ],
            ),
      )),
    );
  }
}

edit If you wish to make it without scroll you can use this approach

SizedBox(
 height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size width,
  child: Column(
   children:[
      //Row widget here
     Expanded(//now this expanded has a bound same as that of the device height 
       child : WebView(),
     )
    ]
  )
)