How to use Expanded in SingleChildScrollView?

Question

How to use Expanded in SingleChildScrollView? I have a screen with Image.network, ListView.builder and Row (TextFormField and IconButton). I wrapped ListView with Expanded. How to wrap this column with SingleChildScrollView? I need to move screen when the keyboard is open to see what I am writing. When I wrap my column I have this error.

      body: SingleChildScrollView(         child: Column(           children: <Widget>[             Container(               child: GestureDetector(                 child:                 Image.network(                   postOne.imageUrl,                   fit: BoxFit.fitWidth,                   height: MediaQuery                       .of(context)                       .size                       .width,                   width: MediaQuery                       .of(context)                       .size                       .width,                 ),                 onLongPress: () {},                 onDoubleTap: () {},               ),             ),             Expanded(               //height: MediaQuery.of(context).size.width*0.33,               child: ListView.builder(                   itemCount: commentList.length,                   itemBuilder: (context, position) {                     return GestureDetector(                         onLongPress: () {},                         child: Card(                           child: Padding(                             padding: EdgeInsets.all(5.0),                             child: new CheckboxListTile(                                 title: new Text(commentList                                     .elementAt(position)                                     .coment,                                   style: TextStyle(fontSize: 18.0),),                                 value: values[commentList                                     .elementAt(position)                                     .coment],                                 onChanged: (bool value) {}),                           ),                         )                     );                   }               ),             ),             Container(               child: Row(                   crossAxisAlignment: CrossAxisAlignment.start,                   children: [                     new Flexible(                       child: Theme(                         data: new ThemeData(                             brightness: Brightness.light,                             primarySwatch: Colors.grey,                             inputDecorationTheme: new InputDecorationTheme(                               labelStyle: new TextStyle(                                   color: Colors.black45, fontSize: 18.0                               ),                             )                         ),                         child: new Form(                           key: _formKey,                           child: new TextFormField(                             validator: (value) {                               if (value.isEmpty) {                                 return 'Please enter the comment';                               }                             },                             controller: commentController,                             decoration: new InputDecoration(                               labelText: "Add comment",                               //hintText: 'Add comment'                             ),                             keyboardType: TextInputType.text,                           ),                         ),                       ),                     ),                     new Container(                         margin: EdgeInsets.only(left: 10.0, top: 12.0),                         child: new IconButton(                             icon: new Icon(Icons.send, color: Colors.black,),                             onPressed: () {}                         )                     ),                   ]),             ),           ],         ),       ), 

I/flutter ( 6816): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ I/flutter ( 6816): The following assertion was thrown during performLayout(): I/flutter ( 6816): RenderFlex children have non-zero flex but incoming height constraints are unbounded. I/flutter ( 6816): When a column is in a parent that does not provide a finite height constraint, for example if it is I/flutter ( 6816): in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a I/flutter ( 6816): flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining I/flutter ( 6816): space in the vertical direction. I/flutter ( 6816): These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child I/flutter ( 6816): cannot simultaneously expand to fit its parent. I/flutter ( 6816): Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible I/flutter ( 6816): children (using Flexible rather than Expanded). This will allow the flexible children to size I/flutter ( 6816): themselves to less than the infinite remaining space they would otherwise be forced to take, and I/flutter ( 6816): then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum I/flutter ( 6816): constraints provided by the parent. I/flutter ( 6816): The affected RenderFlex is: I/flutter ( 6816):   RenderFlex#9f534 relayoutBoundary=up11 NEEDS-LAYOUT NEEDS-PAINT I/flutter ( 6816): The creator information is set to: I/flutter ( 6816):   Column ← _SingleChildViewport ← IgnorePointer-[GlobalKey#3670d] ← Semantics ← Listener ← I/flutter ( 6816):   _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#4878e] ← I/flutter ( 6816):   Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#c5885] ← RepaintBoundary ← CustomPaint ← I/flutter ( 6816):   ⋯ I/flutter ( 6816): The nearest ancestor providing an unbounded width constraint is: I/flutter ( 6816):   _RenderSingleChildViewport#155d8 relayoutBoundary=up10 NEEDS-LAYOUT NEEDS-PAINT I/flutter ( 6816):   creator: _SingleChildViewport ← IgnorePointer-[GlobalKey#3670d] ← Semantics ← Listener ← I/flutter ( 6816):   _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#4878e] ← I/flutter ( 6816):   Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#c5885] ← RepaintBoundary ← CustomPaint ← I/flutter ( 6816):   RepaintBoundary ← ⋯ I/flutter ( 6816):   parentData: <none> (can use size) I/flutter ( 6816):   constraints: BoxConstraints(0.0<=w<=440.8, 0.0<=h<=649.3) I/flutter ( 6816):   size: MISSING I/flutter ( 6816): See also: https://flutter.dev/layout/ I/flutter ( 6816): If this message did not help you determine the problem, consider using debugDumpRenderTree(): I/flutter ( 6816):   https://flutter.dev/debugging/#rendering-layer I/flutter ( 6816):   http://docs.flutter.io/flutter/rendering/debugDumpRenderTree.html I/flutter ( 6816): If none of the above helps enough to fix this problem, please don't hesitate to file a bug: I/flutter ( 6816):   https://github.com/flutter/flutter/issues/new?template=BUG.md I/flutter ( 6816):   

Answer 1

Instead of using SingleChildScrollView, It's easier to use CustomScrollView with a SliverFillRemaining.

Try this:

CustomScrollView(   slivers: [     SliverFillRemaining(       hasScrollBody: false,       child: Column(         children: <Widget>[           const Text('Header'),           Expanded(child: Container(color: Colors.red)),           const Text('Footer'),         ],       ),     ),   ], )