Automatically applying Scrollbars on desktop platforms causes NestedScrollView/TabBarView bug

[DexEze]

Is there an existing issue for this?

• I have searched the existing issues
• I have read the guide to filing a bug

Steps to reproduce

1. Create a flutter project
2. Build a stateful widget that contains a SliverAppBar with a TabBar at the bottom, contained within a NestedScrollView, with a TabBarView, containing any scrollable element.
3. build and run the app on any desktop, I used Chrome Web Browser.
4. Scroll on a tab and then switch to another tab, then switch to another tab.

Expected results

The tabs switch with no error

Actual results

The tabs switch and the error below is thrown:

When the exception was thrown, this was the stack:
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 288:49  throw_
packages/flutter/src/widgets/scrollbar.dart 1600:9                            <fn>
packages/flutter/src/widgets/scrollbar.dart 1624:14                           [_debugCheckHasValidScrollPosition]
packages/flutter/src/widgets/scrollbar.dart 1534:14                           [_validateInteractions]
packages/flutter/src/animation/listener_helpers.dart 240:19                   notifyStatusListeners
packages/flutter/src/animation/animation_controller.dart 815:7                [_checkStatusChanged]
packages/flutter/src/animation/animation_controller.dart 749:5                [_startSimulation]
packages/flutter/src/animation/animation_controller.dart 612:12               [_animateToInternal]
packages/flutter/src/animation/animation_controller.dart 495:12               reverse
packages/flutter/src/widgets/scrollbar.dart 1734:37                           <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/isolate_helper.dart 48:19       internalCallback
The AnimationController notifying status listeners was:
  AnimationController#b1a79(◀ 1.000)
════════════════════════════════════════════════════════════════════════════════════════════════════

Code sample

Code sample

import 'package:flutter/material.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);

  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];

  SliverAppBar showSliverAppBar(BuildContext context, String screenTitle) {
    final screenSize = MediaQuery.of(context).size;

    return SliverAppBar(
      elevation: 15,
      backgroundColor: Theme.of(context).colorScheme.primary,
      floating: true,
      pinned: true,
      snap: false,
      centerTitle: true,
      title: Center(
        child: Text(
          screenTitle,
          textAlign: TextAlign.center,
        ),
      ),
      actions: [
        Padding(
          padding: EdgeInsets.only(
            right: screenSize.width * 0.01,
          ),
          child: IconButton(
            onPressed: () {},
            icon: const Icon(
              Icons.person,
            ),
          ),
        ),
      ],
      bottom: const TabBar(
        tabs: [
          Tab(
            icon: Icon(Icons.home),
            text: 'Home',
          ),
          Tab(
            icon: Icon(Icons.calendar_month_outlined),
            text: 'Calendar',
          ),
          Tab(
            icon: Icon(Icons.question_mark),
            text: 'About Us',
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: const Drawer(
        child: Column(
          children: <Widget>[
            DrawerHeader(
              curve: SawTooth(12),
              child: Text('I am Drawer'),
            ),
          ],
        ),
      ),
      body: DefaultTabController(
        length: 3,
        child: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return [
              showSliverAppBar(context, 'Nested Scroll View Error'),
            ];
          },
          body: TabBarView(
            children: [
              CustomScrollView(
                slivers: [
                  SliverList(
                    delegate: SliverChildListDelegate(
                      [
                        Container(
                          height: 600,
                          color: Theme.of(context).colorScheme.secondary,
                          child: const Center(
                            child: Text(
                              'Calendar Tab',
                              style: TextStyle(fontSize: 40),
                            ),
                          ),
                        ),
                        Container(
                          height: 1500,
                          color: Colors.green,
                          child: Center(
                            child: _widgetOptions.elementAt(_selectedIndex),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              CustomScrollView(
                slivers: [
                  SliverList(
                    delegate: SliverChildListDelegate(
                      [
                        Container(
                          height: 600,
                          color: Colors.blue[200],
                          child: const Center(
                            child: Text('Calendar Tab',
                                style: TextStyle(fontSize: 40)),
                          ),
                        ),
                        Container(
                          height: 1200,
                          color: Colors.pink,
                          child: Center(
                            child: _widgetOptions.elementAt(_selectedIndex),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              CustomScrollView(
                slivers: [
                  SliverList(
                    delegate: SliverChildListDelegate(
                      [
                        Container(
                          height: 600,
                          color: Colors.blue[200],
                          child: const Center(
                            child: Text('About Us Tab',
                                style: TextStyle(fontSize: 40)),
                          ),
                        ),
                        Container(
                          height: 1200,
                          color: Colors.pink,
                          child: Center(
                            child: _widgetOptions.elementAt(_selectedIndex),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

2023-05-22.14-26-20.mp4

Logs

Logs

When the scrollbar is interactive, the associated ScrollController must only have one ScrollPosition
attached.The provided ScrollController must be unique to one ScrollView widget.
When the exception was thrown, this was the stack:
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 288:49  throw_
packages/flutter/src/widgets/scrollbar.dart 1600:9                            <fn>
packages/flutter/src/widgets/scrollbar.dart 1624:14                           [_debugCheckHasValidScrollPosition]
packages/flutter/src/widgets/scrollbar.dart 1534:14                           [_validateInteractions]
packages/flutter/src/animation/listener_helpers.dart 240:19                   notifyStatusListeners
packages/flutter/src/animation/animation_controller.dart 815:7                [_checkStatusChanged]
packages/flutter/src/animation/animation_controller.dart 749:5                [_startSimulation]
packages/flutter/src/animation/animation_controller.dart 612:12               [_animateToInternal]
packages/flutter/src/animation/animation_controller.dart 495:12               reverse
packages/flutter/src/widgets/scrollbar.dart 1734:37                           <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/isolate_helper.dart 48:19       internalCallback
The AnimationController notifying status listeners was:
  AnimationController#b1a79(◀ 1.000)
════════════════════════════════════════════════════════════════════════════════════════════════════

Flutter Doctor output

Doctor output

flutter doctor -v
[√] Flutter (Channel stable, 3.10.0, on Microsoft Windows [Version 10.0.22621.1702], locale en-AU)
    • Flutter version 3.10.0 on channel stable at C:\Users\DexEze\Documents\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 84a1e904f4 (13 days ago), 2023-05-09 07:41:44 -0700
    • Engine revision d44b5a94c9
    • Dart version 3.0.0
    • DevTools version 2.23.1

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at C:\Users\DexEze\AppData\Local\Android\sdk
    • Platform android-33, build-tools 32.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-9586694)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.6.5)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.6.30320.27
    • Windows 10 SDK version 10.0.18362.0

[√] Android Studio (version 2022.2)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-9586694)

[√] VS Code (version 1.78.2)
    • VS Code at C:\Users\DexEze\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.36.0

[√] Connected device (5 available)
    • sdk gphone x86 64 (mobile)         • emulator-5554 • android-x64    • Android 13 (API 33) (emulator)
    • Android SDK built for x86 (mobile) • emulator-5556 • android-x86    • Android 11 (API 30) (emulator)
    • Windows (desktop)                  • windows       • windows-x64    • Microsoft Windows [Version 10.0.22621.1702]
    • Chrome (web)                       • chrome        • web-javascript • Google Chrome 113.0.5672.127
    • Edge (web)                         • edge          • web-javascript • Microsoft Edge 113.0.1774.42

[√] Network resources
    • All expected network resources are available.

• No issues found!

[DexEze]

I found the issue. It turns out that a tabView with scrollbars causes the issue.

On desktop scrollbars are automatically added, this includes on Chrome. I was only experiencing this issue on desktop. source: https://docs.flutter.dev/release/breaking-changes/default-desktop-scrollbars

It seems to be related to this: #78588

To fix this issue I needed to make it so scrollBars were turned off in my application. So I went to my main.dart and inside of MaterialApp I added scrollBehavior: ScrollConfiguration.of(context).copyWith(scrollbars: false). This simple change disabled scrollbars and fixed the issue. I have also found that if I do not want to disable scroll bars in my entire app, I can go into the individual CustomScrollView Widgets and add scrollBehavior: ScrollConfiguration.of(context).copyWith(scrollbars: false) and that would fix the error also.

Fixed code:

import 'package:flutter/material.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);

  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];

  SliverAppBar showSliverAppBar(BuildContext context, String screenTitle) {
    final screenSize = MediaQuery.of(context).size;

    return SliverAppBar(
      elevation: 15,
      backgroundColor: Theme.of(context).colorScheme.primary,
      floating: true,
      pinned: true,
      snap: false,
      centerTitle: true,
      title: Center(
        child: Text(
          screenTitle,
          textAlign: TextAlign.center,
        ),
      ),
      actions: [
        Padding(
          padding: EdgeInsets.only(
            right: screenSize.width * 0.01,
          ),
          child: IconButton(
            onPressed: () {},
            icon: const Icon(
              Icons.person,
            ),
          ),
        ),
      ],
      bottom: const TabBar(
        tabs: [
          Tab(
            icon: Icon(Icons.home),
            text: 'Home',
          ),
          Tab(
            icon: Icon(Icons.calendar_month_outlined),
            text: 'Calendar',
          ),
          Tab(
            icon: Icon(Icons.question_mark),
            text: 'About Us',
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: const Drawer(
        child: Column(
          children: <Widget>[
            DrawerHeader(
              curve: SawTooth(12),
              child: Text('I am Drawer'),
            ),
          ],
        ),
      ),
      body: DefaultTabController(
        length: 3,
        child: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return [
              showSliverAppBar(context, 'Nested Scroll View Error'),
            ];
          },
          body: TabBarView(
            children: [
              CustomScrollView(
                scrollBehavior:
                    ScrollConfiguration.of(context).copyWith(scrollbars: false),
                slivers: [
                  SliverList(
                    delegate: SliverChildListDelegate(
                      [
                        Container(
                          height: 600,
                          color: Theme.of(context).colorScheme.secondary,
                          child: const Center(
                            child: Text(
                              'Calendar Tab',
                              style: TextStyle(fontSize: 40),
                            ),
                          ),
                        ),
                        Container(
                          height: 1500,
                          color: Colors.green,
                          child: Center(
                            child: _widgetOptions.elementAt(_selectedIndex),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              CustomScrollView(
                scrollBehavior:
                    ScrollConfiguration.of(context).copyWith(scrollbars: false),
                slivers: [
                  SliverList(
                    delegate: SliverChildListDelegate(
                      [
                        Container(
                          height: 600,
                          color: Colors.blue[200],
                          child: const Center(
                            child: Text('Calendar Tab',
                                style: TextStyle(fontSize: 40)),
                          ),
                        ),
                        Container(
                          height: 1200,
                          color: Colors.pink,
                          child: Center(
                            child: _widgetOptions.elementAt(_selectedIndex),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              CustomScrollView(
                scrollBehavior:
                    ScrollConfiguration.of(context).copyWith(scrollbars: false),
                slivers: [
                  SliverList(
                    delegate: SliverChildListDelegate(
                      [
                        Container(
                          height: 600,
                          color: Colors.blue[200],
                          child: const Center(
                            child: Text('About Us Tab',
                                style: TextStyle(fontSize: 40)),
                          ),
                        ),
                        Container(
                          height: 1200,
                          color: Colors.pink,
                          child: Center(
                            child: _widgetOptions.elementAt(_selectedIndex),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

[darshankawar]

Good to know you found out the root-cause and fixed it. Based on above comment, I am assuming the issue is fixed and can be closed. If you disagree, write in comments and I'll reopen it.

It turns out that a tabView with scrollbars causes the issue.

For this, you may checkout this issue and this comment for further reference.

[DexEze]

Hi @darshankawar,
This is not fixed and should not be closed. I found a workaround, as noted above, that allows me to not receive the error, however if I want to have a scrollbar attached to my tabs, then I will still receive this error, so it is in fact a bug with flutter that needs to be fixed. As a NestedScrollView uses one ScrollController for its content, this means that all three tabs TabView's use the same ScrollController, so if I want to have tabbars there is no way to do this without unlinking it from the NestedScrollView (which defeats the entire purpose).

This bug is present in the code provided in the "Motivation" section of the following official flutter API docs https://api.flutter.dev/flutter/widgets/NestedScrollView-class.html if run on any desktop application/browser

For this, you may checkout this issue and this comment for further reference.

The above issue and comment you linked are unrelated to this issue, as they refer to wrapping the TabBar with a ScrollBar, which is not the aim here.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.