Skip to content

AppBar doesn't detect scroll under when list views are inside TabBarView #103698

@TahaTesser

Description

@TahaTesser

Split from #103642 (contained label and scroll under issues, this is tracking scroll under issue separately)

Description

Appbar with the regular body containing a scroll view updates the app bar when the list view scroll under the app, however when replacing the regular list view with tab bar view with child listview doesn't update the app bar.

minimal code sample
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key, this.dark = false, this.useMaterial3 = true});

  final bool dark;
  final bool useMaterial3;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      themeMode: dark ? ThemeMode.dark : ThemeMode.light,
      theme: ThemeData(
        useMaterial3: useMaterial3,
        brightness: Brightness.light,
        colorSchemeSeed: const Color(0xff6750a4),
      ),
      darkTheme: ThemeData(
        useMaterial3: useMaterial3,
        brightness: Brightness.dark,
        colorSchemeSeed: const Color(0xff6750a4),
      ),
      home: const TabBarExample(),
    );
  }
}

class TabBarExample extends StatelessWidget {
  const TabBarExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 1,
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Appbar'),
          bottom: const TabBar(
            tabs: <Widget>[
              Tab(
                icon: Icon(Icons.cloud_outlined),
                text: 'Cloud',
              ),
              Tab(
                icon: Icon(Icons.beach_access_sharp),
                text: 'Beach',
              ),
              Tab(
                icon: Icon(Icons.brightness_5_sharp),
                text: 'Beach',
              ),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            Center(
              child: ListView.builder(
                itemCount: 100,
                itemBuilder: (BuildContext context, int index) {
                  return const Center(child: Text("It's cloudy here"));
                },
              ),
            ),
            Center(
              child: ListView.builder(
                itemCount: 100,
                itemBuilder: (BuildContext context, int index) {
                  return const Center(child: Text("It's s here"));
                },
              ),
            ),
            Center(
              child: ListView.builder(
                itemCount: 100,
                itemBuilder: (BuildContext context, int index) {
                  return const Center(child: Text("It's sunny here"));
                },
              ),
            ),
          ],
        ),
        // body: ListView.builder(
        //   itemCount: 100,
        //   itemBuilder: (BuildContext context, int index) {
        //     return const Center(child: Text("It's cloudy here"));
        //   },
        // ),
      ),
    );
  }
}

Appbar with regular list view (tab label color issue is tracked here)

Screen.Recording.2022-05-13.at.15.10.53.mov

Appbar with tab bar view containing list view (tab label color issue is tracked here)

Screen.Recording.2022-05-13.at.15.12.21.mov
flutter doctor -v
[✓] Flutter (Channel master, 3.1.0-0.0.pre.684, on macOS 12.3.1 21E258 darwin-arm, locale en-GB)
    • Flutter version 3.1.0-0.0.pre.684 at /Users/tahatesser/Code/flutter_nevercode
    • Upstream repository [email protected]:NevercodeHQ/flutter.git
    • Framework revision 2ee3a6f92a (4 hours ago), 2022-05-13 04:19:07 -0400
    • Engine revision fb30b43b16
    • Dart version 2.18.0 (build 2.18.0-109.0.dev)
    • DevTools version 2.13.1

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at /Users/tahatesser/Code/android-sdk
    • Platform android-32, build-tools 32.1.0-rc1
    • ANDROID_SDK_ROOT = /Users/tahatesser/Code/android-sdk
    • Java binary at: /Applications/Android Studio Preview.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio
    • Android Studio at /Applications/Android Studio Preview.app/Contents
    • 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 11.0.13+0-b1751.21-8125866)

[✓] VS Code (version 1.67.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.40.0

[✓] Connected device (4 available)
    • Taha’s iPhone (mobile)     • 00008020-001059882212002E            • ios            • iOS 15.4.1 19E258
    • iPhone 13 Pro Max (mobile) • 3EB061AB-0B1E-41E3-8445-2A179E0402D0 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-15-4 (simulator)
    • macOS (desktop)            • macos                                • darwin-arm64   • macOS 12.3.1 21E258
      darwin-arm
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome
      101.0.4951.64
    ! Error: Taha’s iPhone is busy: Preparing the watch for development via Taha’s iPhone. Xcode will continue when
      Taha’s iPhone is finished. (code -10)

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

Metadata

Metadata

Assignees

Labels

f: material designflutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.

Type

No type

Projects

Status

Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions