Flutter：AnimatedContainer 内的渲染列

Question

I am trying to give an expanded effect like this.

  isOpened == true
                        ? AnimatedContainer(
                            duration: Duration(seconds: 2),
                            curve: Curves.fastOutSlowIn,
                            child: Container(
                              width: !_mapViewController.cardExpanded()
                                  ? MediaQuery.of(context).size.width * 0.00
                                  : MediaQuery.of(context).size.width * 0.85,
                              height: !_mapViewController.cardExpanded()
                                  ? MediaQuery.of(context).size.height * 0.00
                                  : MediaQuery.of(context).size.height * 0.28,
                              child: Column(
                                children: [
                                  Container(height: 100, width: 100, color: Colors.orange),
                                  ListWidget(),
                                ],
                              ),
                            ),
                          )
                        : Container(),

My List widget is

  @override
  Widget build(BuildContext context) {
    
    return ListView(
      shrinkWrap: true,
      scrollDirection: Axis.horizontal,
      children: [
        RaisedButton(
          onPressed: () {
            print('heey');
          },
          child: Text(
            'heuhaiuh',
          ),
        ),
        Container(
          height: 35,
          width: 35,
        ),
        Container(
          height: 35,
          width: 35,
          color: Colors.green,
        ),
        Container(
          height: 35,
          width: 35,
          color: Colors.yellow,
        ),
        Container(
          height: 35,
          width: 35,
          color: Colors.orange,
        ),
      ],
    );
  }

I am receiving tons of errors saying

flutter: Another exception was thrown: RenderConstrainedBox does not meet its constraints.
flutter: Another exception was thrown: RenderDecoratedBox does not meet its constraints.
flutter: Another exception was thrown: Null check operator used on a null value
flutter: Another exception was thrown: 'package:flutter/src/rendering/object.dart': Failed assertion: line 1704 pos 12: '!_debugDoingThisLayout': is not true.

It works fine without ListWidget() . If I replace Column() to ListWidget() then it works fine too. How can I place the ListView() inside the Column() in this case?

And, the animation does not work as well. The container just appears without the animation. Wondering how can I adjust this too?

Answer 1

Since your ListView scroll direction is horizontal, the height of it's parent must be specified. Wrap your ListView in a Container and give a height to the container

return Container(
   height: PREFERRED_HEIGHT,
   child: ListView(
     // ...
   ),
);