Make container widget fill parent vertically

Question

TL;DR Need the container to fill the vertical space so that it can act as a ontap listener. Have tried most solutions but nothing seems to work.

So what I am trying to do is to make my container fill up the vertical space while still having a fixed width. Two first is what I have and third is what I want. The idea is to have the container transparent with a gesture ontap listener. If anyone have a better idea as for a different solution, feel free to suggest.

Widget build(BuildContext context) { return new GestureDetector(   onHorizontalDragUpdate: _move,   onHorizontalDragEnd: _handleDragEnd,   child: new Stack(     children: <Widget>[       new Positioned.fill(                    child: new Row(           mainAxisAlignment: MainAxisAlignment.end,           children: <Widget>[             new Container(               child: new IconButton(                                           padding: new EdgeInsets.only(top: 16.0, bottom: 16.0, left: 24.0, right: 24.0),                 icon: new Icon(Icons.warning),                 color: Colors.black12,                 onPressed: () {},               )             ),           ],         ),       ),       new SlideTransition(         position: new Tween<Offset>(           begin:  Offset(0.0, 0.0),           end: const Offset(-0.6, 0.0),         ).animate(_animation),         child: new Card(           child: new Row(             children: <Widget>[               new Container(                 width: 20.0,                 height: 20.0,                 color: Colors.amber,               ),               new Expanded(                 child: new Column(                   mainAxisSize: MainAxisSize.min,                   children: <Widget>[                      _getListTile(),                     _ifStoplineIsToBeShown()                   ],                 ),               )             ],           )         ),       ),     ],   ) ); 

}

I am quite sure that i have been missing something considering the fact that I have tried a lot of different things and nothing seems to work.

I have also uploaded an image with the debug painting here.

PS. I know I have set the height to a fixed value, but this is the only way to show the container.

Answer 1

The trick is to combine an IntrinsicHeight widget and a Row with crossAxisAlignment: CrossAxisAlignment.stretch

This force the children of Row to expand vertically, but Row will take the least amount of vertical space possible.

Card(   child: IntrinsicHeight(     child: Row(       crossAxisAlignment: CrossAxisAlignment.stretch,       children: <Widget>[         Container(           width: 20.0,           color: Colors.amber,         ),         // Expanded(...)       ],     ),   ) )