Flutter ListView.Builder() in scrollable Column with other widgets

Question

I have a TabBarView() with an amount of different views. I want of them to be a Column with a TextField at top and a ListView.Builder() below, but both widgets should be in the same scrollable area (scrollview). The way I implemented it threw some errors:

@override Widget build(BuildContext context) { return new Column(   mainAxisAlignment: MainAxisAlignment.center,     mainAxisSize: MainAxisSize.max,     children: <Widget>[       new Padding(           padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),           child: new TextField(             decoration: new InputDecoration(                 hintText: "Type in here!"             ),           )       ),       new ListView.builder(           itemCount: _posts.length, itemBuilder: _postBuilder)     ],    ); } 

Error:

I/flutter (23520): The following assertion was thrown during performResize(): I/flutter (23520): Vertical viewport was given unbounded height. I/flutter (23520): Viewports expand in the scrolling direction to fill their container.In this case, a vertical I/flutter (23520): viewport was given an unlimited amount of vertical space in which to expand. This situation I/flutter (23520): typically happens when a scrollable widget is nested inside another scrollable widget. I/flutter (23520): If this widget is always nested in a scrollable widget there is no need to use a viewport because I/flutter (23520): there will always be enough vertical space for the children. In this case, consider using a Column I/flutter (23520): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size I/flutter (23520): the height of the viewport to the sum of the heights of its children. 

I read about stacking the ListView.builder() in an Expanded-Area but it made the textfield kind of "sticky" which is not what I want. :-)

I also came across CustomScrollView but didn't fully understand how to implement it.

Answer 1

Here is the solution:

SingleChildScrollView(         physics: ScrollPhysics(),         child: Column(           children: <Widget>[              Text('Hey'),              ListView.builder(                 physics: NeverScrollableScrollPhysics(),                 shrinkWrap: true,                 itemCount:18,                 itemBuilder: (context,index){                   return  Text('Some text');                 })           ],         ),       ), 

Answer 2

Placing the ListView inside an Expanded widget should solve your problem:

@override Widget build(BuildContext context) { return new Column(   mainAxisAlignment: MainAxisAlignment.center,     mainAxisSize: MainAxisSize.max,     children: <Widget>[       new Padding(           padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),           child: new TextField(             decoration: new InputDecoration(                 hintText: "Type in here!"             ),           )       ),       new Expanded(child: ListView.builder(           itemCount: _posts.length, itemBuilder: _postBuilder))     ],    ); }