Flutter - Fill height of Card

Question

I need to fill a Card with several Widgets, some of which need to fill the full height, but not the full width. The card contains a Row to be able to align two widgets next to each other, and the first one needs to fill the parent vertically (the other widget is an ExpansionTile and can thus grow in height). The only way to get the Container to show right now is by wrapping it in a SizedBox, with the height set to a specific value. Of course this does not allow the Container to grow or shrink with the height of the Card.

I have tried IntrinsicHeight, Expanded, Row with CrossAxisAlignment.stretch and nothing seems to allow the colored box to fill its parent's height (the Card).

The main issue is that the Card's height is set by the ExpansionTile height, and thus not fixed. So if I set the height of the Container to double.infinity, Flutter is unable to build the layout because it would stretch the Card's height until infinity.

Green is wanted result when ExpansionTile is closed:

Red is wanted result when ExpansionTile is open:

This is the relevant code:

Card( child: Row( children: <Widget>[ Align( alignment: Alignment.centerLeft, child: SizedBox( width: 10, height: 74, child: Container( decoration: BoxDecoration( color: color, borderRadius: new BorderRadius.all(Radius.circular(3.0)), ), ), ), ), Expanded( child: Theme( data: Theme.of(context).copyWith(dividerColor: Colors.transparent), child: ExpansionTile( title: Text('Title'), subtitle: Text('Subtitle'), children: <Widget>[ Padding( padding: EdgeInsets.only(left: 25), child: ListTile( title: Text('child title'), subtitle: Text('child subtitle'), trailing: Icon(Icons.chevron_right), ), ), Padding( padding: EdgeInsets.only(left: 25), child: ListTile( title: Text('child title'), subtitle: Text('child subtitle'), trailing: Icon(Icons.chevron_right), ), ), ], ), ), ), ], ), ),

Vofch · Accepted Answer · 2020-05-13 10:02:18Z

So basically your problem is that when you don`t specify the height of a container, the container will will get the height of his child, or, if the parent forces the child to receive his height, (such as sizedBox)...

So, the best solution for you is to wrap the card (or the row) with the LayoutBuilder widget and use the constrains.maxHeight as the height to the container.

so the code should be something like this:

LayoutBuilder( builder: (context, constraints) => Card( child: Row( children: <Widget>[ Align( alignment: Alignment.centerLeft, child: Container( height: constraints.maxHeight, decoration: BoxDecoration( // color: color, borderRadius: new BorderRadius.all(Radius.circular(3.0)), ), ), ), Expanded( child: Theme( // data: Theme.of(context).copyWith(dividerColor: Colors.transparent), child: ExpansionTile( title: Text('Title'), subtitle: Text('Subtitle'), children: <Widget>[ Padding( padding: EdgeInsets.only(left: 25), child: ListTile( title: Text('child title'), subtitle: Text('child subtitle'), trailing: Icon(Icons.chevron_right), ), ), Padding( padding: EdgeInsets.only(left: 25), child: ListTile( title: Text('child title'), subtitle: Text('child subtitle'), trailing: Icon(Icons.chevron_right), ), ), ], ), ), ), ], ), ), );

I couln't test if the code above is working, so please let me know if it does.

Thanks for the response! I do get the same error though: ════════ Exception caught by rendering library ════════ The following assertion was thrown during performLayout(): BoxConstraints forces an infinite height.

Collectives™ on Stack Overflow

Flutter - Fill height of Card

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related