NestedScrollView scrolls page too much - flutter

Question

I want to implement something like an Instagram profile page with the NestedScrollView widget. So I combine this with a TabBar widget. I have two tabs. Detail and comments. Then I have other widgets on top of the TabBar. Everything works as expected so far. But the problem starts when I scroll. Even though there is nothing inside my tabs, NestedScrollView scrolls too much, and my TabBar widget comes to the top of the screen. In Instagram, if you have no photos, you can not scroll the page. But in my application, I can scroll. And this is the behavior I want to prevent. How can I do this? I also share my codes and screenshots of the unwanted behavior.
This is the page
This is the over scroll even though there is nothing to show inside the tab bar
These are the codes:
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Home Page"),
),
body: DefaultTabController(
length: 2,
child: NestedScrollView(
headerSliverBuilder: (context, isScrolled) {
return [
SliverToBoxAdapter(
child: Container(
margin: const EdgeInsets.all(16),
child: const Placeholder(
fallbackHeight: 300,
fallbackWidth: double.infinity,
color: Colors.amberAccent,
),
),
),
SliverPersistentHeader(
pinned: true,
delegate: StickyTabBarDelegate(
child: const TabBar(
labelColor: Colors.black,
tabs: [
Tab(text: "Detail"),
Tab(text: "Comments"),
],
),
),
)
];
},
body: const TabBarView(
children: [
DetailTab(),
CommentsTab(),
],
),
),
),
);
}
}
class DetailTab extends StatelessWidget {
const DetailTab({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container();
}
}
class CommentsTab extends StatelessWidget {
const CommentsTab({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container();
}
}
class StickyTabBarDelegate extends SliverPersistentHeaderDelegate {
final TabBar child;
StickyTabBarDelegate({required this.child});
#override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return Container(
color: Colors.white,
child: child,
);
}
#override
double get maxExtent => child.preferredSize.height;
#override
double get minExtent => child.preferredSize.height;
#override
bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
return true;
}
}