how to auto resize card view in flutter based on the content

Question

I am facing an issue in flutter where I have a listview inside a card widget. I am reading data from the SQLite database to populate my listview. I don't know how long the listview will be. My problem is that currently I am setting a fixed height to cardview and since my listview can be long or short I get an overflow pixel error.

Here is my code:

import 'package:flutter/material.dart';
import 'package:finsec/widget/single_line_list_view.dart';
import 'package:finsec/widget/header.dart';

import 'package:finsec/data/cardview_list_item.dart';

class cardView extends StatelessWidget {
  cardView({
    this.header,
    this.elevation,
    this.padding,
    this.query,
    this.iconColor
  });

  String header, query;
  double elevation, padding;
  Color iconColor;

  final shape = const RoundedRectangleBorder(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(8.0),
        topRight: Radius.circular(8.0),
        bottomLeft: Radius.circular(8.0),
        bottomRight: Radius.circular(8.0),
      )
  );

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.fromLTRB(0.0, padding, 0.0, 0.0),  //vertical padding between cardivew and $s0.00
      child: new Card(
        elevation: elevation,
        shape: shape,
        child: new Container(
          width: MediaQuery
              .of(context)
              .size
              .width,
          height: 165.00,
          child: new Column(
            children:[
              Header(text: header,
                textSize: 24.0,
                backgroundColor: Color(0xffC4C4C4),
                textColor: Colors.black,
                height: 50,
                padding: 20.0,
                headerRadius: 8.0
              ),
            CardviewListItemData(query)  //listview goes here

            ],
          ),
        ),
      ),
    );
  }
}

If my listview returns 2 items then cardview looks ok but after 3 items or more I get an overflow pixel error. The reason is I am setting the height of the container to 165.00 manually.
see pic below

How can I fix my code so that the cardview auto resizes based on the number of items in my listview? For example, if my listview returns 5 items then cardview should show all five items. I cannot set the height manually because I don't know the number of items on the list. Is there any way to dynamically resize the cardview to show any number of items returned by the listview?

Anirudh Bagri · Answer 1 · 2021-07-08T13:56:58.543

4

You can try to surround your card within a Row widget within IntrinsicHeight widget with crossAxisAlignment: CrossAxisAlignment.stretch

With this, children of Row (your cards) will expand vertically, but Row will take the least amount of vertical space available.

Container(
  child: IntrinsicHeight(
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        YourCard(
          width: 20.0,
        ),
      ],
    ),
  )
)

edited Jul 08 '21 at 13:56

answered Sep 30 '19 at 14:50

Anirudh Bagri

2,346
1
21
33

thanks Anirudh but i tried your solution and doesnt work. i get the following error. ╡ EXCEPTION CAUGHT BY RENDERING LIBRARY I/flutter ( 6170): The following assertion was thrown during performLayout(): I/flutter ( 6170): RenderShrinkWrappingViewport does not support returning intrinsic dimensions. I/flutter Calculating the intrinsic dimensions would require instantiating every child of the viewport, which I/flutter ( 6170): defeats the point of viewports being lazy. I/flutter ( 6170): If you are merely trying to shrink-wrap the viewport in the main axis direction, you should be able – yoohoo Sep 30 '19 at 15:40
it happens when the container doesn't have a fixed size. Can you try adding some height and width to it – Anirudh Bagri Sep 30 '19 at 15:49
i added height but still errors. can you write/code an example of listview inside a carview to show how you solve the problem and share the code with me? – yoohoo Sep 30 '19 at 16:11

score 0 · Answer 2 · answered Sep 30 '19 at 16:14

0

Seems like the ListView is inside a Column, try to wrap your CardviewListItemData in a Flexible widget.

answered Sep 30 '19 at 16:14

roipeker

1,183
9
9

how to auto resize card view in flutter based on the content

2 Answers2