Skip to content

SliverAppBar's flexibleSpace glitch on iOS when NestedScrollView's body is a ScrollView #29264

@hendricgc

Description

@hendricgc

Steps to Reproduce

Basically, when creating an application with a SliverAppBar inside a NestedScrollView, a scrolling glitch is performed only on iOS if you scroll down and then scroll up before the bouncing animation ends. On Android it does not happen.
Noticed that it happens when the body of the NestedScrollView is an implementation of ScrollView.

Demo:

sliverappbarglitch

Example code (simplified code from the demo):

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  TabController _tabController;
  ScrollController _scrollViewController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: 2);
    _scrollViewController = ScrollController(initialScrollOffset: 0.0);
  }

  @override
  void dispose() {
    _tabController.dispose();
    _scrollViewController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        controller: _scrollViewController,
        headerSliverBuilder: (BuildContext context, bool boxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              expandedHeight: 300.0,
              title: Text('Tab Controller Example'),
              pinned: true,
              floating: true,
              forceElevated: boxIsScrolled,
            )
          ];
        },
        body: PageOne(),
      ),
    );
  }
}

class PageOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemExtent: 250.0,
      itemBuilder: (context, index) => Container(
            padding: EdgeInsets.all(10.0),
            child: Material(
              elevation: 4.0,
              borderRadius: BorderRadius.circular(5.0),
              color: index % 2 == 0 ? Colors.cyan : Colors.deepOrange,
              child: Center(
                child: Text(index.toString()),
              ),
            ),
          ),
    );
  }
}

Is there any workaround to make it work properly? Is this a framework bug? I ask that because almost every example code of this functionality is like the example above.

Thank you!

Logs

Flutter doctor:

[✓] Flutter (Channel beta, v1.2.1, on Mac OS X 10.13.6 17G3025, locale pt-BR)
    • Flutter version 1.2.1 at /Users/hendricgc/flutter
    • Framework revision 8661d8aecd (4 weeks ago), 2019-02-14 19:19:53 -0800
    • Engine revision 3757390fa4
    • Dart version 2.1.2 (build 2.1.2-dev.0.0 0a7dcf17eb)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at /Users/hendricgc/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1248-b01)
    • All Android licenses accepted.

[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.1, Build version 10B61
    • ios-deploy 1.9.4
    • CocoaPods version 1.5.3

[✓] Android Studio (version 3.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 33.3.1
    • Dart plugin version 182.5215
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1248-b01)

[✓] Connected device (2 available)
    • Android SDK built for x86 • emulator-5554                        • android-x86 • Android 8.1.0 (API 27) (emulator)
    • iPhone 8                  • 24F06D4E-0628-4529-93A4-D2C16A67C4F6 • ios         • iOS 12.1 (simulator)

• No issues found!

Metadata

Metadata

Assignees

Labels

P1High-priority issues at the top of the work lista: annoyanceRepeatedly frustrating issues with non-experimental functionalitycustomer: crowdAffects or could affect many people, though not necessarily a specific customer.f: material designflutter/packages/flutter/material repository.f: scrollingViewports, list views, slivers, etc.frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-iosiOS applications specificallywaiting for PR to land (fixed)A fix is in flight

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions