NestedScrollView body keeps scrolling even if empty space is available - flutter

Question

My requirement is to create a page with collapsing toolbar and two tabs.
To do this, I am using the code below.
SafeArea(
child: DefaultTabController(
length: 2,
child: NestedScrollView(
headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) {
return [
SliverPersistentHeader(
pinned: true,
delegate: _Header(),
)
];
},
body: TabBarView(
children: <Widget>[
Container1(),
Container2(),
],
),
),
),
)
Everything works, but once the scrolling starts and the header collapses, the body keeps on scrolling even if all the widgets are visible.
How do I make it behave like Android native, where if the list is small in size, the list doesn't scroll after the header collapses.

Answer 1

For anyone who is facing the same issue, this is how I fixed it.
You can just copy the entire code and run it to check and modify accordingly.
The code is taken from the official documentation.
import 'dart:convert';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_module/app_constants.dart';
import 'package:flutter_module/data/local/shared_pref.dart';
import 'package:flutter_module/data/remote/api_end_points.dart';
import 'package:flutter_module/string_localization.dart';
import 'package:flutter_module/ui/router.dart';
import 'package:flutter_module/util.dart';
import 'package:http/http.dart' as http;
import 'data/local/dao/sync_dao.dart';
import 'data/remote/response_pojo/video_challenges_response.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MainCollapsingToolbar(),
);
}
}
class MainCollapsingToolbar extends StatefulWidget {
#override
_MainCollapsingToolbarState createState() => _MainCollapsingToolbarState();
}
class _MainCollapsingToolbarState extends State<MainCollapsingToolbar> {
#override
Widget build(BuildContext context) {
var _tabs = ["One", "Two"];
return Scaffold(
body: 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),
child: SliverPersistentHeader(
pinned: true,
delegate: _SliverAppBarDelegate(minHeight: 100, maxHeight: 150, child: Container(
color: Colors.blue,
)),
),
),
];
},
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: 1,
),
),
),
],
);
},
),
);
}).toList(),
),
),
),
);
}
}

Answer 2

wrap your body with Expanded widget