Flutter Can't create a Listview to fill height but only have fixed width-CodePudding

I can't work this out. It should be really simple. (This is Flutter Desktop)

I want a Row with 2 columns. The first column should be full height available but only 200 wide. Column 2 should be full height and use the remainder of the width.

I have tried all sorts but always get an overflow rather than a scrollable list.

What am I doing wrong?

This is the last iteration of my code.

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Bnode Management'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text('This is the title'),
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Expanded(
                child: Container(
                  width: 200,
                  child: ListView.builder(
                    shrinkWrap: true,
                      itemCount: piItems.length,
                      itemBuilder: (BuildContext context, int index) {
                        return Container(width: 40, color: Colors.red, child: Text(piItems[index].id));
                      }),
                ),
              ),
              Container(color: Colors.blue, child: const Text('Column 1')),
            ],
          ),
        ],
      ),
    );
  }
}

CodePudding user response：

The second Column like to have max space, therefor we can use Expanded on it instead of using on 1st Column. Also, the Row is needed to have max height. For this, we will wrap this Row with Expanded.

body: Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    const Text('This is the title'),
    Expanded(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: 200,
            child: ListView.builder(
                shrinkWrap: true,
                itemCount: piItems.length,
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                      width: 40,
                      color: Colors.red,
                      child: Text(piItems[index].id));
                }),
          ),
          Expanded(
            child: Container(
              color: Colors.blue,
              child: Column(
                children: [
                  const Text('Column 1'),
                ],
              ),
            ),
          )
        ],
      ),
    ),
  ],
),

I also prefer using LayoutBuilder on body in this case.

CodePudding user response：

You almost got it right, just mixed some things. Let's go step by step.

I want a Row with 2 columns

Ok, that's just a Row with two children.

Row(
  children: [child1, child2],
)

The first column should be full height available but only 200 wide.

It would take the full height automatically but I see that in your code example you have a Column with Text title, so we should wrap our Row with Expanded. Also, the first Column should take 200 px.

Column(
  children: [
    const Text('This is the title'),
    Expanded(
      child: Row(
        children: [
          Container(
            width: 200,
            child: child1,
          ),
          child2,
        ],
      ),
    ),
  ],
)

Column 2 should be full height and use the remainder of the width.

So we wrap our 2nd child with Expanded inside the Row.

Column(
  children: [
    const Text('This is the title'),
    Expanded(
      child: Row(
        children: [
          Container(
            width: 200,
            child: child1,
          ),
          Expanded(
            child: child2,
          ),
        ],
      ),
    ),
  ],
)

The end result based on your code:

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Bnode Management'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text('This is the title'),
          Expanded(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  width: 200,
                  child: ListView.builder(
                    shrinkWrap: true,
                    itemCount: piItems.length,
                    itemBuilder: (BuildContext context, int index) {
                      return Container(
                          width: 40,
                          color: Colors.red,
                          child: Text(piItems[index].id));
                    },
                  ),
                ),
                Expanded(
                  child: Container(
                    color: Colors.blue,
                    child: const Text('Column 1'),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}