Repository: flutter
Issue: Part of the content not visible behind transparent snapping SliverAppBar
Labels: framework,f: material design,f: scrolling,has reproducible steps,P2,found in release: 3.3,found in release: 3.7,team-design,triaged-design

I think i maybe found  a bug regarding tabs, NestedScrollView, SliverAppBar, SliverOverlapAbsorber - i don't know exactly.

I need a slightly transparent floating and snapping appbar with tabs.

## Steps to Reproduce

Most of the code below copied from [NestedScrollView class - Motivation](https://api.flutter.dev/flutter/widgets/NestedScrollView-class.html#widgets.NestedScrollView.1) and [NestedScrollView class - Snapping SliverAppBars](https://api.flutter.dev/flutter/widgets/NestedScrollView-class.html#widgets.NestedScrollView.3) sections. I set the colors multiple places for visibility.

To reproduce the bug / behavior, you must first scroll down until the content goes behind the appbar and the 'appbar' disappears (the tabs remaining visible of course), and then you should scroll up a bit for the bar to come back and then down or up while keep touching. At this point, part of the content still behind the appbar is not visible.

<details>
<summary>code sample</summary>

``` dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final List<String> _tabs = ['Tab 1', 'Tab 2'];
    return Scaffold(
      body: Stack(
        children: [
          Container(
            color: Colors.amber,
          ),
          DefaultTabController(
            length: _tabs.length, // This is the number of tabs.
            child: NestedScrollView(
              headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
                // These are the slivers that show up in the "outer" scroll view.
                return <Widget>[
                  SliverOverlapAbsorber(
                    // This widget takes the overlapping behavior of the SliverAppBar,
                    // and redirects it to the SliverOverlapInjector below. If it is
                    // missing, then it is possible for the nested "inner" scroll view
                    // below to end up under the SliverAppBar even when the inner
                    // scroll view thinks it has not been scrolled.
                    // This is not necessary if the "headerSliverBuilder" only builds
                    // widgets that do not overlap the next sliver.
                    handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                    sliver: SliverAppBar(
                      title: const Text('Books', style: TextStyle(color: Colors.black)),
                      // This is the title in the app bar.
                      // The "forceElevated" property causes the SliverAppBar to show
                      // a shadow. The "innerBoxIsScrolled" parameter is true when the
                      // inner scroll view is scrolled beyond its "zero" point, i.e.
                      // when it appears to be scrolled below the SliverAppBar.
                      // Without this, there are cases where the shadow would appear
                      // or not appear inappropriately, because the SliverAppBar is
                      // not actually aware of the precise position of the inner
                      // scroll views.
                      forceElevated: innerBoxIsScrolled,
                      elevation: 0.0,
                      backgroundColor: Colors.transparent,
                      brightness: Brightness.light,
                      iconTheme: IconThemeData(
                        color: Colors.black,
                      ),
                      pinned: true,
                      floating: true,
                      snap: true,
                      bottom: TabBar(
                        // These are the widgets to put in each tab in the tab bar.
                        tabs: _tabs.map((String name) => Tab(text: name)).toList(),
                        labelColor: Colors.black,
                        indicatorColor: Colors.black,
                      ),
                      actions: [
                        IconButton(
                          icon: Icon(Icons.share),
                          onPressed: () {},
                        ),
                      ],
                    ),
                  ),
                ];
              },
              body: TabBarView(
                // These are the contents of the tab views, below the tabs.
                children: _tabs.map((String name) {
                  return SafeArea(
                    top: false,
                    bottom: false,
                    child: Builder(
                      // This Builder is needed to provide a BuildContext that is
                      // "inside" the NestedScrollView, so that
                      // sliverOverlapAbsorberHandleFor() can find the
                      // NestedScrollView.
                      builder: (BuildContext context) {
                        return CustomScrollView(
                          // The "controller" and "primary" members should be left
                          // unset, so that the NestedScrollView can control this
                          // inner scroll view.
                          // If the "controller" property is set, then this scroll
                          // view will not be associated with the NestedScrollView.
                          // The PageStorageKey should be unique to this ScrollView;
                          // it allows the list to remember its scroll position when
                          // the tab view is not on the screen.
                          key: PageStorageKey<String>(name),
                          slivers: <Widget>[
                            SliverOverlapInjector(
                              // This is the flip side of the SliverOverlapAbsorber
                              // above.
                              handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                            ),
                            SliverPadding(
                              padding: const EdgeInsets.all(8.0),
                              // In this example, the inner scroll view has
                              // fixed-height list items, hence the use of
                              // SliverFixedExtentList. However, one could use any
                              // sliver widget here, e.g. SliverList or SliverGrid.
                              sliver: SliverFixedExtentList(
                                // The items in this example are fixed to 48 pixels
                                // high. This matches the Material Design spec for
                                // ListTile widgets.
                                itemExtent: 48.0,
                                delegate: SliverChildBuilderDelegate(
                                  (BuildContext context, int index) {
                                    // This builder is called for each child.
                                    // In this example, we just number each list item.
                                    return ListTile(
                                      title: Text('Item $index'),
                                    );
                                  },
                                  // The childCount of the SliverChildBuilderDelegate
                                  // specifies how many children this inner list
                                  // has. In this example, each tab has a list of
                                  // exactly 30 items, but this is arbitrary.
                                  childCount: 30,
                                ),
                              ),
                            ),
                          ],
                        );
                      },
                    ),
                  );
                }).toList(),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
```
</details> 

**Expected results:** <!-- what did you want to see? -->
The content should be visible in all cases.

**Actual results:** <!-- what did you see? -->
In some cases the content is not visible.

<img src="https://user-images.githubusercontent.com/10554127/95073038-7e021600-070c-11eb-9e48-f37bf4d04581.jpeg" width ="300"> 

I tried several things (SliverAppBar's different height settings, SafeArea, SliverSafeArea, removing SliverAppBar title, action icon...) without success. However the size  of the blank section was affected when i changed the toolbarHeight and/or collapsedHeight and/or expandedHeight of the SliverAppBar.

<details>
  <summary>Logs</summary>

flutter doctor

```
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.0, on Mac OS X 10.15.7 19H2, locale hu-HU)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 12.0.1)
[✓] Android Studio (version 4.0)
[✓] IntelliJ IDEA Ultimate Edition (version 2019.3.2)
[!] Connected device
    ! No devices available

! Doctor found issues in 1 category.
```

</details>