Flutter ListView inside Card

Question

I would like to have a Screen which will have 3 Cards. One card would be CotrolWidget(Top with fixed height), Second will be the MeasurementsList(under Top, should fill vertically) and third will be ChartWidget(under Top, right from the MeasurementsList,should fill vertically).

return Scaffold(
  appBar: AppBar(title: new Text('Measurements')),
  body: new Container(
      padding: EdgeInsets.all(8.0),
      decoration: BoxDecoration(color: Colors.black12),
      child: Column(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Row(children: [ControlsWidget(device)]),
          Row(
            children: <Widget>[
              MeasurementList(device)
              ,
              ChartWidget(device)
            ],
          )
        ],
      )),
);

In the Measurements Card, I would like to have a ListView. But when I use Expaded, the ListView will extend the screen and the list is not scrollable

Widget build(BuildContext context) {
return Expanded(
  flex: 1,
  child: Card(
    elevation: 4.0,
    child: ListView.builder(
      scrollDirection: Axis.horizontal,
      itemBuilder: (context, index) {
        return ListTile(title: Text(measurements[index]));
      },
      itemCount: measurements.length,
      shrinkWrap: true,
    ),
  ),
);

}

So, how to create a Card with ListView inside?

Answer 1

Try Using MediaQuery for height.

MediaQueryData queryData; queryData = MediaQuery.of(context);

and then in height use

height: queryData.size.height - height_of_ControlsWidget

Answer 2

I too got the same problem, but I tired to use the Flexible Widget instead of expanded widget.

check out this stack over link for better understanding.