title: How to scroll stacked containers with sticky header in Flutter?
body: <p>I am trying to achieve scroll in Flutter Web where I have few containers which are stacked and I use SingleChildScrollView to scroll the widget. However, when I scroll the first container everything working fine but the second one which is a child of the second container responds to the scroll without completing the initial one. And also is there a way to make a sticky header for the second container. How can I make the 3rd container(orange) to scroll after the 2nd(blue) one is finished scrolling? Here is what I am trying to achieve:
  <a href="https://yobithemes.com/demo/html/freda/dark-video-index.html" rel="nofollow noreferrer">https://yobithemes.com/demo/html/freda/dark-video-index.html</a></p>
  <p>And here what I got so far:</p>
  <p><a href="https://i.stack.imgur.com/5FZ6c.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5FZ6c.gif" alt="enter image description here" /></a></p>
  <pre><code>class MainScreen extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Stack(
          children: &lt;Widget&gt;[
            IntroScreen(),
            SingleChildScrollView(
              child: Container(
                child: Column(
                  children: &lt;Widget&gt;[
                    SizedBox(
                      height: MediaQuery.of(context).size.height - 100,
                    ),
                    Container(
                      height: MediaQuery.of(context).size.height,
                      width: MediaQuery.of(context).size.width,
                      color: Colors.blue,
                      child: SingleChildScrollView(
                        child: Column(
                          children: [
                            SizedBox(
                              height: MediaQuery.of(context).size.height,
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 100),
                              height: MediaQuery.of(context).size.height,
                              width: MediaQuery.of(context).size.width,
                              color: Colors.orange,
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      );
    }
  }
  </code></pre>