CODEWITHSUNDEEP
flutterflutter-layout
TimSim
TimSim

Reputation: 4036

ListView or SingleChildScrollView of variable size

I want to have a widget of variable height that contains a ListView or a SingleChildScrollView or anything that scrolls.

I tried making it like this:

Container(
    color: Colors.pink,
    child: Column(
      children: [
        Container(color: Colors.orange, child: Text("Header")),
        SingleChildScrollView(
            child: Container(
                height: 10000,
                color: Colors.green,
                child: Text("the height of this content could be anything")),
          ),

        Container(color: Colors.blue, child: Text("Footer")),
      ],
    ),
)

This causes an overflow because the SingleChildScrollView expands to height of 10000 pixels. If I enclose it in an Expanded then it works fine but then if its child's height is for example 200 instead of 10000, it will still expand the parent widget to the entire height of the screen.

Is it possible to have the height of the scroll/list adjust itself to its content and only expand to the entire screen if it needs to?

Upvotes: 3

Views: 279

Answers (2)

Fayaz
Fayaz

Reputation: 2124

You can use ConstrainedBox, to specify minHeight, maxHeight for your widget. Remember that none of your widget should have infinite height/width, that spoils the UI, may also throw error

Upvotes: 0

diegoveloper
diegoveloper

Reputation: 103541

You can do it if you know the size of the footer and header widget and using LayoutBuilder widget to get the constraints.

 @override
  Widget build(BuildContext newcontext) {
    return Center(
      child: Scaffold(
        body: Container(
            color: Colors.pink,
            child: LayoutBuilder(
              builder: (_, constraints) {

                final sizeHeader = 150.0;
                final sizeFooter = 150.0;
                final sizeList = 1000.0;
                final available =
                    constraints.maxHeight - (sizeHeader + sizeFooter);

                Widget _buildCenterWidget() {
                  return Container(
                    height: sizeList,
                    color: Colors.green,
                    child: Text("the height of this content could be anything"),
                  );
                }

                return Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    Container(
                        height: sizeHeader,
                        color: Colors.orange,
                        child: Text("Header")),
                    available < sizeList
                        ? Expanded(
                            child: _buildCenterWidget(),
                          )
                        : _buildCenterWidget(),
                    Container(
                        height: sizeFooter,
                        color: Colors.blue,
                        child: Text("Footer")),
                  ],
                );
              },
            )),
      ),
    );
  }

Upvotes: 2

Related Questions