Repository: flutter
Issue: FlexibleSpaceBar's TabBar position is not preserved when scrolling Tab's ListView
Labels: framework,f: scrolling,has reproducible steps,P2,found in release: 3.10,found in release: 3.11,team-framework,triaged-framework

### Is there an existing issue for this?

- [X] I have searched the [existing issues](https://github.com/flutter/flutter/issues)
- [X] I have read the [guide to filing a bug](https://flutter.dev/docs/resources/bug-reports)

### Steps to reproduce

1. Run the code provided below,
2. Switch to a new tab. The problem is best visible when the third tab is selected,
3. Now scroll the page up and down again,
4. Now you observe that the TabBar scroll position is reset to the left and that right tabs (even if selected) aren't visible anymore.

As a work around for this bug, I tried wrapping the TabBar with a Notifier and than resetting the position with the _tabController.animateTo() when a scroll is executed. But this doesn't work, since the function execution is stopped as soon as the new index equals the current index.

### Expected results

The scroll position of the TabBar stays constant, so that the selected tab in the tabbar is fully visible.

### Actual results

The scroll position is reset to the left. This means that if a selected tab is on the right of a scrollable TabBar, this tab potentially isn't visible. 
Also, there is a weird left realigning happening during the animation when flexing the TabBar by the scroll. See the video.

### Code sample

<details><summary>Code sample</summary>

```dart
import 'package:flutter/material.dart';

// The main navigation of the app for the different screens.
class TabsNavigation extends StatefulWidget {
  const TabsNavigation({super.key});

  @override
  State<TabsNavigation> createState() => _TabsNavigationState();
}

class _TabsNavigationState extends State<TabsNavigation>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
  late ScrollController _scrollController;

  @override
  void initState() {
    super.initState();
    _tabController =
        TabController(vsync: this, length: 3, initialIndex: 1);
    _tabController.addListener(_handleTabSelection);

    _scrollController = ScrollController();
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  // Rerender the tabs when a new page is opened.
  _handleTabSelection() {
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        controller: _scrollController,
        headerSliverBuilder: (context, innerBoxIsScrolled) => [
          SliverAppBar(
            elevation: 0.0,
            pinned: true,
            stretch: true,
            expandedHeight: 120,
            // MediaQuery.of(context).size.height / _tabsHeightFraction,
            forceElevated: innerBoxIsScrolled,
            titleSpacing: 0.0,
            shadowColor: Colors.transparent,
            floating: true,
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              title: TabBar(
                controller: _tabController,
                isScrollable: true,
                overlayColor:
                    MaterialStateProperty.all<Color>(Colors.transparent),
                tabs: [
                  Text(
                    "Tab 1",
                    style: TextStyle(
                        fontSize: 30,
                        color: _tabController.index == 0
                            ? Colors.red
                            : Colors.grey),
                  ),
                  Text(
                    "Tab 2",
                    style: TextStyle(
                        fontSize: 30,
                        color: _tabController.index == 1
                            ? Colors.red
                            : Colors.grey),
                  ),
                  Text(
                    "Tab 3",
                    style: TextStyle(
                        fontSize: 30,
                        color: _tabController.index == 2
                            ? Colors.red
                            : Colors.grey),
                  ),
                ],
              ),
            ),
          ),
        ],
        body: TabBarView(
          controller: _tabController,
          children: [
            _dummyTab(),
            _dummyTab(),
            _dummyTab(),
          ],
        ),
      ),
    );
  }

  Widget _dummyTab() {
    return ListView.builder(
      itemCount: 30,
      itemBuilder: (BuildContext context, int index) {
        return _dummyData(); // Replace YourWidget with your actual widget class
      },
    );
  }

  Widget _dummyData() {
    return const Card(
      child: Text("Dummy Entry", style: TextStyle(fontSize: 20)),
    );
  }
}

```

</details>


### Screenshots or Video

<details>
<summary>Screenshots / Video demonstration</summary>

https://github.com/flutter/flutter/assets/22996986/bb647f5b-6ad1-4d3c-9e5c-00c74ddbb19e


</details>


### Logs

<details><summary>Logs</summary>

```console
[Paste your logs here]
```

</details>


### Flutter Doctor output

<details><summary>Doctor output</summary>

```console
[✓] Flutter (Channel stable, 3.7.12, on macOS 13.3.1 22E772610a darwin-arm64, <snip>)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] VS Code (version 1.78.1)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

• No issues found!
```

</details>