Flutter: Nested ListView Overflow warning

Question

I have a nested ListView like this.

  AnimatedContainer(
            width: MediaQuery.of(context).size.width * 0.90,
            height:  MediaQuery.of(context).size.height * 0.45,
            child: Stack(
              children: [
                Positioned(
                  child: Column(
                    children: [
                      Container(
                        height: MediaQuery.of(context).size.height * 0.30,
                        width: MediaQuery.of(context).size.width * 0.90,
                        child: Column(
                          children: [
                            Container(
                          width: 300,
                              height: MediaQuery.of(context).size.height * 0.20,
                              child: Row(
                               crossAxisAlignment: CrossAxisAlignment.stretch,
                               children: [
                                Text('hmm'),
                                Row(
                                  ListView(     
                                  shrinkWrap: true,
                                  scrollDirection: Axis.horizontal,
                                   children: [
                                        Container(
                                      height: 40,
                                      width: 200,
                                      color: Colors.white,
                                       ),
                                       Container(
                                       height: 40,
                                       width: 200,
                                       color: Colors.white,
                                         ),
                                        Container(
                                         height: 40,
                                          width: 200,
                                        color: Colors.white,
                                         ),
                                            ]
       

I am trying to have a scroll effect inside the Container. However, I am getting The overflowing RenderFlex has an orientation of Axis.horizontal.

First, I'd thought it was because of the Container widget did not have height and width. But it doesn't look like it was a problem since I still have the error. I've tried to add Expanded widget or another Container widget to set the height and width. None of them fixing the Overflow warning.

What should I have to adjust in order to make the ListView vertically scrollable inside the AnimatedContainer ?

Answer 1

Maybe you could try replace the Row that wrapper the ListView with horizontal direction, with a Container or something with fixed height.