how to prevent horizontal ListView items from stretching

Question

I have a horizontal ListView inside a Column.

My ListView is rendering 100 x 100 items that i want to animate their height to 200 later.

I am wrapping my ListView inside a Container that has a height of 200 other wise i get errors and the code will not run

The problem now is that the list items are stretching their height to 200. Is there a way to prevent that behavior, i tried alignment but it didn't work. Here's the code so far

Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              height: 200,
              child: ListView(
                scrollDirection: Axis.horizontal,
                children: <Widget>[
                  CCard(),
                  CCard(),
                  CCard(),
                  CCard(),
                  CCard(),
                ],
              ),
            ),
          ],
        ));

And the List items

class CCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 8.0),
      height: 100,
      width: 100,
      color: Colors.red[200],
    );
  }
}

Answer 1

Try wrapping your Container inside Align or Center, like this :

            class CCard extends StatelessWidget {
              @override
              Widget build(BuildContext context) {
                return Center(
                  child: Container(
                    margin: EdgeInsets.symmetric(horizontal: 8.0),
                    height: 100,
                    width: 100,
                    color: Colors.red[200],
                  ),
                );
              }
            }

More info: https://docs.flutter.io/flutter/widgets/Container-class.html