Persist scroll position of TabBarViews in NestedScrollView in flutter during swipes

I have a List of Tabs in a Tabbar.

However, I have an issue. If you run the sample code below and scroll to item 30 on Tab 1 then swipe to Tab 2 and back to Tab 1 you will immediately notice that item 30 in Tab 1 is no longer focused. The scroller has jumped to item 1 instead. This is weird.

I have tried everything possible to ensure the scroll position of each ListView is preserved irrespective of how many times I swipe away and back to it.

Here is a full runnable sample code showing exactly the issue I'm facing.

import 'package:flutter/material.dart';

class SampleListApp extends StatefulWidget {
  const SampleListApp({Key? key}) : super(key: key);

  @override
  State<SampleListApp> createState() => _SampleListAppState();
}

class _SampleListAppState extends State<SampleListApp>
    with TickerProviderStateMixin {
  TabController? _tabController;
  late ScrollController _scrollViewController;
  int _currentTabIndex = 0;

  _handleTabChange() {
    setState(() {
      if (_tabController != null) {
        _currentTabIndex = _tabController!.index;
      }
    });
  }

  _initTabController() {
    _tabController?.dispose();
    _tabController =
        TabController(initialIndex: _currentTabIndex, vsync: this, length: 2);
    _tabController?.addListener(_handleTabChange);
  }

  @override
  void initState() {
    super.initState();
    _initTabController();
    _scrollViewController = ScrollController(initialScrollOffset: 0.0);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        controller: _scrollViewController,
        headerSliverBuilder: (BuildContext context, bool boxIsScrolled) => [
          SliverAppBar(
            title: const Text("Hello World"),
            bottom: TabBar(
              indicatorColor: Colors.white,
              isScrollable: true,
              labelColor: Colors.orange,
              unselectedLabelColor: Colors.grey,
              tabs: const [
                Tab(
                  text: "Tab 1",
                ),
                Tab(
                  text: "Tab 2",
                )
              ],
              controller: _tabController,
            ),
            pinned: true,
            floating: true,
            forceElevated: boxIsScrolled,
          ),
        ],
        body: TabBarView(
          key: UniqueKey(),
          controller: _tabController,
          children: const [
            ChildView(),
            ChildView(),
          ],
        ),
      ),
    );
  }
}

class ChildView extends StatefulWidget {
  const ChildView({Key? key}) : super(key: key);

  @override
  State<ChildView> createState() => _ChildViewState();
}

class _ChildViewState extends State<ChildView> {
  @override
  Widget build(BuildContext context) {
    final List<String> itemList =
        List.generate(100, (index) => "Item ${index + 1}");
    return SingleChildScrollView(
      child: Column(
        children: [
          const Padding(
            padding: EdgeInsets.only(
              top: 16.0,
              left: 16,
              right: 16,
            ),
            child: TextField(
              textInputAction: TextInputAction.search,
            ),
          ),
          ListView.builder(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            itemCount: itemList.length,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                title: Text(itemList[index]),
              );
            },
          ),
        ],
      ),
    );
  }
}

What can I do to always preserve the scroll positions of my ListViews when swiped away and back

If you remove the UniqueKey from TabBarView, the TabBarView won't rebuild when you setState and add AutomaticKeepAliveClientMixin mixin like this:

class ChildView extends StatefulWidget {
  const ChildView({Key? key}) : super(key: key);

  @override
  State<ChildView> createState() => _ChildViewState();
}

class _ChildViewState extends State<ChildView>
    with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    final List<String> itemList =
        List.generate(100, (index) => "Item ${index + 1}");
    return SingleChildScrollView(
      child: Column(
        children: [
          const Padding(
            padding: EdgeInsets.only(
              top: 16.0,
              left: 16,
              right: 16,
            ),
            child: TextField(
              textInputAction: TextInputAction.search,
            ),
          ),
          ListView.builder(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            itemCount: itemList.length,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                title: Text(itemList[index]),
              );
            },
          ),
        ],
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}