Flutter: ListView inside Row gives me Right Overflowed

Question

I wanted to fix my Icon Container and then make the Card Container scrollable. However, I am getting Right Overflow error. I think it is because of the Icon Container's width. How can I make my icons fixed in position and make ListView vertically scrollable at the same time?

return Row(
      children: [
        Container(
          height: 150,
          color: Colors.amber,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              IconButton(
                iconSize: 20,
                icon: Icon(Icons.add_circle_outline),
                onPressed: () {
                  print('hello');
                },
              ),
            ],
          ),
        ),
        Container(
          color: Colors.white,
          height: 150,
          child: ListView(
            shrinkWrap: true,
            scrollDirection: Axis.horizontal,
            children: [
              Card(
                child: Container(
                    color: Colors.grey,
                    width: 150,
                    child: Text('hello'),
                  ),
                ),
              ),
              Card(
                child: Container(
                    color: Colors.grey,
                    width: 150,
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );

----- Edit

So the result of the code above is like this. What I want to do is that

• IconButton in the fix place.
• Cards will be horizontally scrollable.

without the Right Overflow warning.

Answer 1

Try to Wrap second container with Expanded:

return Row(
      children: [
        Container(
          height: 150,
          color: Colors.amber,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              IconButton(
                iconSize: 20,
                icon: Icon(Icons.add_circle_outline),
                onPressed: () {
                  print('hello');
                },
              ),
            ],
          ),
        ),
        Expanded(child:
        Container(
          color: Colors.white,
          height: 150,
          child: ListView(
            shrinkWrap: true,
            scrollDirection: Axis.horizontal,
            children: [
              Card(
                child: Container(
                    color: Colors.grey,
                    width: 150,
                    child: Text('hello'),
                  ),
                ),
              ),
              Card(
                child: Container(
                    color: Colors.grey,
                    width: 150,
                  ),
                ),
              ),
            ],
          ),),
        ),
      ],
    );