nested_scroll_view_with_tabbarview_scroll_sync_issue.dart

nested_scroll_view_with_tabbarview_scroll_sync_issue.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'NestedScroll View with TabBarView',
      home: PostsPage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class PostsPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _PostsPageState();
}

class _PostsPageState extends State<PostsPage> {
  final List<String> _tabs = <String>[
    "Featured",
    "Popular",
    "Latest",
  ];

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: DefaultTabController(
          length: _tabs.length,
          child: NestedScrollView(
            body: TabBarView(
              children: _tabs.map((String name) {
                return TestTabItem(name);
              }).toList(),
            ),
            headerSliverBuilder:
                (BuildContext context, bool innerBoxIsScrolled) {
              return [
                SliverToBoxAdapter(
                  child: Container(
                    color: Colors.blue.withOpacity(0.2),
                    height: 100,
                  ),
                ),
                SliverAppBar(
                  pinned: true,
                  flexibleSpace: TabBar(
                    tabs: _tabs.map((String name) => Tab(text: name)).toList(),
                  ),
                ),
              ];
            },
          ),
        ),
      ),
    );
  }
}

class TestTabItem extends StatefulWidget {
  const TestTabItem(
    this.name, {
    super.key,
  });

  final String name;

  @override
  State<TestTabItem> createState() => _TestTabItemState();
}

class _TestTabItemState extends State<TestTabItem>
    with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverPadding(
          padding: const EdgeInsets.all(8),
          sliver: SliverList.list(
            children: [
              for (int i = 0; i < 30; i++)
                Container(
                  height: 100,
                  margin: const EdgeInsets.only(bottom: 8),
                  padding: const EdgeInsets.all(8),
                  color: Theme.of(context).secondaryHeaderColor,
                  child: Text(
                    '$i',
                    style: Theme.of(context).textTheme.headlineLarge,
                  ),
                )
            ],
          ),
        ),
      ],
    );
  }

  @override
  bool get wantKeepAlive => true;
}