CODEWITHSUNDEEP
flutter
Vingtoft
Vingtoft

Reputation: 14616

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

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:

enter image description here

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?

Upvotes: 7

Views: 10018

Answers (4)

korchix
korchix

Reputation: 1700

There is a better option here using SliverFillRemaining in combination with CustomScrollView instead of a ListView

in your case the code will look like this.

Container(
          color: Colors.blueAccent,
          child: CustomScrollView(
            shrinkWrap: true, // or false 
            slivers: <Widget>[
              SliverToBoxAdapter(
                child:Container(
                color: Colors.yellow,
                height: 100
              ),),
              SliverToBoxAdapter(
                child: SizedBox(height: 10),),

              // use SliverFillRemaining to make this container fill up the remaining height?
            SliverFillRemaining(
            hasScrollBody: false, // if using a column, so the widgets in it, doesn't scroll
            child:Container( //this container will fill the remaining space in the ViewPort
                color: Colors.black,
              ),
            )  ,
            
            ],
          ),          
        ),

Upvotes: 12

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63614

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,
                          ),
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ),
          );
        }),

Upvotes: 4

Ravindra S. Patil
Ravindra S. Patil

Reputation: 14785

Try below code hope its helpful to you. use MediaQuery here. add MediaQuery height to your black container

Refer blog also here for relative to screen size

     Container(
            color: Colors.blueAccent,
            child: ListView(
              shrinkWrap: true,
              physics: ScrollPhysics(),
              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,
                  height: MediaQuery.of(context).size.height,
                ),
              ],
            ),
          ),

Your result screen-> image

Upvotes: 1

Kdon
Kdon

Reputation: 1225

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.

enter image description here

  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,
              ),
            ],
          ),
        ),
      ),
    ));
  }
}

Upvotes: 0

Related Questions