title: Flutter Nested bottom sheet or slide up panel
body: <p>What is the best way to build a &quot;nested bottom sheet&quot; which behaves like this:
  <a href="https://dribbble.com/shots/14139422-Mobile-banking-app-interactions" rel="nofollow noreferrer">https://dribbble.com/shots/14139422-Mobile-banking-app-interactions</a>?</p>
  <p>Do I have to use <code>NestedScrollView</code> or <code>CustomScrollView</code>, or a completely different approach?</p>
  <p><strong>Update :</strong></p>
  <p>This is my result using <code>SlidingUpPanel</code>, but I still have two problems:</p>
  <ol>
  <li>When sliding up the panel, the green and red containers stay behind the panel and do not scroll out of view at the top.</li>
  <li>In landscape mode the containers are higher than the device, so this approach does not work. I need the panel to be attached to the bottom of the containers, so it is only visible when scrolling down.</li>
  </ol>
  <p>Code:</p>
  <pre><code>SafeArea(
    child: Scaffold(
      body: SlidingUpPanel(
        minHeight: MediaQuery.of(context).size.height - 479,
        maxHeight: MediaQuery.of(context).size.height - 79,
        panel: SingleChildScrollView(
          child: Column(
            children: [Text('Sliding Panel')],
          ),
        ),
        body: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Container(
                height: 100,
                color: Colors.green,
              ),
              Container(
                height: 300,
                color: Colors.red,
              )
            ],
          ),
        ),
      ),
    ),
  );
  </code></pre>
  <p>Result:</p>
  <p><a href="https://i.stack.imgur.com/miSDe.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/miSDe.gif" alt="Result" /></a></p>