Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make Stack layout scroll-able using SingleChildScrollView?

I am trying to make stack layout scrollable using SingleChildScrollView but it's not scrolling. Is SingleChildScrollView should be used here?

I think I have given enough description to make anyone understand my question. More text here to satisfy StackOverflow's requirement to ask a question. Sorry about this.

Here's example code.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          child: Center(
            child: LayoutBuilder(
              builder:
                  (BuildContext context, BoxConstraints viewportConstraints) {
                return SingleChildScrollView(
                  child: ConstrainedBox(
                    constraints: BoxConstraints(
                      minHeight: viewportConstraints.maxHeight,
                    ),
                    child: IntrinsicHeight(
                      child: Column(
                        children: <Widget>[
                          Container(
                            // A fixed-height child.
                            color: Colors.white,
                            height: 120.0,
                          ),
                          Expanded(
                            // A flexible child that will grow to fit the viewport but
                            // still be at least as big as necessary to fit its contents.
                            child: Container(
                              color: Colors.blue,
                              //height: 120.0,
                              child: Stack(
                                children: <Widget>[
                                  Positioned(
                                    top: 0,
                                    left: 0,
                                    right: 0,
                                    child: Container(
                                      color: Colors.red[100],
                                      child: SizedBox(
                                        height: 300,
                                      ),
                                    ),
                                  ),
                                  Positioned(
                                    top: 50,
                                    left: 0,
                                    right: 0,
                                    child: Container(
                                      color: Colors.red[200],
                                      child: SizedBox(
                                        height: 300,
                                      ),
                                    ),
                                  ),
                                  Positioned(
                                    top: 100,
                                    left: 0,
                                    right: 0,
                                    child: Container(
                                      color: Colors.red[300],
                                      child: SizedBox(
                                        height: 300,
                                      ),
                                    ),
                                  ),
                                  Positioned(
                                    top: 150,
                                    left: 0,
                                    right: 0,
                                    child: Container(
                                      color: Colors.green[100],
                                      child: SizedBox(
                                        height: 300,
                                      ),
                                    ),
                                  ),
                                  Positioned(
                                    top: 200,
                                    left: 0,
                                    right: 0,
                                    child: Container(
                                      color: Colors.green[200],
                                      child: SizedBox(
                                        height: 300,
                                      ),
                                    ),
                                  ),
                                  Positioned(
                                    top: 250,
                                    left: 0,
                                    right: 0,
                                    child: Container(
                                      color: Colors.green[300],
                                      child: SizedBox(
                                        height: 300,
                                      ),
                                    ),
                                  ),
                                  Positioned(
                                    top: 300,
                                    left: 0,
                                    right: 0,
                                    child: Container(
                                      color: Colors.yellow[100],
                                      child: SizedBox(
                                        height: 300,
                                      ),
                                    ),
                                  ),
                                  Positioned(
                                    top: 350,
                                    left: 0,
                                    right: 0,
                                    child: Container(
                                      color: Colors.yellow[200],
                                      child: SizedBox(
                                        height: 300,
                                      ),
                                    ),
                                  ),
                                  Positioned(
                                    top: 400,
                                    left: 0,
                                    right: 0,
                                    child: Container(
                                      color: Colors.yellow[300],
                                      child: SizedBox(
                                        height: 300,
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
        ),
      ),
    );
  } 
like image 669
bnayagrawal Avatar asked Jan 25 '19 05:01

bnayagrawal


People also ask

How do I make StackLayout scrollable?

Scrolling content If a StackLayout contains too many children to display on a page, you can put the StackLayout in a ScrollView to allow scrolling. Set the Content property of ScrollView to the view you want to scroll. This is often a StackLayout , but it can be any view.


2 Answers

It depends on what size should the StackView have. For example you can make one of Stack's children not positioned. This child will then affect the size of entire stack view.

SingleChildScrollView(
  child: Stack(
    children: <Widget>[
      Container(
        height: 5000,
      ),
      Positioned(
        top: 100,
        left: 100,
        width: 1000,
        height: 1000,
        child: Container(color: Colors.red),
      )
    ],
  ),
)
like image 188
szotp Avatar answered Oct 16 '22 07:10

szotp


Stack will get the constraints of the biggest child. But if you use Position the constraints of that child are not considered by stack. If you want dynamic height and width for the stack use Margin inside a container instead of position.

To explain more in detail

    SingleChildScrollView(
  child: Stack(
    children: <Widget>[
      Container(
        height: 500,
      ),
      Positioned(
        top: 100,
        left: 100,
        child: Container(color: Colors.red, height: 1000, width: 1000),
      )
    ],
  ),
)

In the above case stack will only take 500 as height. Your Container which has 1000 will not be considered.

    SingleChildScrollView(
  child: Stack(
    children: <Widget>[
      Container(
        height: 500,
      ),
      Container(margin: EdgeInsets.only(top: 100, left: 100, color: Colors.red, height: 1000, width: 1000),
    ],
  ),
)

In the above case the height of the container will be used for defining the height of stack. This will also allow for SingleChildScrollView to be scrollable.

like image 34
Nihit Alamuru Avatar answered Oct 16 '22 08:10

Nihit Alamuru