Flutter | How to fill the remaining space of a ListView?-CodePudding

In my Flutter app, I have a ListView:

return Scaffold(
      body: SafeArea(
        child: Container(
          color: Colors.blueAccent,
          child: ListView(
            children: [
              Container(
                color: Colors.yellow,
                height: 100
              ),
              const SizedBox(height: 10),

              // How to make this container fill up the remaining height?
              Container(
                color: Colors.black,
              ),
            ],
          ),
        ),
      ),
    );

This produces the following view:

Question: How can I make the second box (with black background color) fill up the remaining space? If the content of the box exceeds the remaining space, the ScrollView will enable scrolling.

Is this possible?

CodePudding user response：

You can get size and then set a proportion for each... And set NeverScrollableScrollPhysics() to ensure no slight scrolling, as per below this appears to get what you are seeking.

  Widget build(BuildContext context) {
    Size _size = MediaQuery.of(context).size;

    return Container(
        child: Scaffold(
      body: SafeArea(
        child: Container(
          color: Colors.blueAccent,
          child: ListView(
            physics: NeverScrollableScrollPhysics(),
            children: [
              Container(color: Colors.yellow, height: _size.height * 0.20),
              SizedBox(height: _size.height * 0.10),              // How to make this container fill up the remaining height?
              Container(
                height: _size.height * 0.70,
                color: Colors.black,
              ),
            ],
          ),
        ),
      ),
    ));
  }
}

CodePudding user response：

Try below code hope its helpful to you. use MediaQuery

CodePudding user response：

Fill the remaining space of a ListView means filling the infinite height. I will prefer using Stack as body in this case, hope you can simply archive this.

How can we do without stack?

In this case, we can get the height and use it on Column and using Expanded on inner child that will fill the remaining spaces even for dynamic height.

I prefer using LayoutBuilder to get height.

 body: LayoutBuilder(builder: (context, constraints) {
          return SafeArea(
            child: Container(
              color: Colors.blueAccent,
              child: ListView(
                children: [
                  SizedBox(
                    // 1st child of listView
                    height: constraints.maxHeight,
                    child: Column(
                      children: [
                        Container(color: Colors.yellow, height: 100),
                        const SizedBox(height: 10),
                        Expanded(
                          child: Container(
                            color: Colors.black,
                          ),
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ),
          );
        }),