Skip to content

FlexibleSpaceBar - no fade when scrolling #128636

@ccodenam

Description

@ccodenam

Is there an existing issue for this?

Steps to reproduce

  • Run my sample code on either Android or iPhone.
  • Scroll the content.
  • Observe how the FlutterLogo does not fade in/out whilst scrolling.

Expected results

According to the documentation and many examples on the internet (plus my own memory of how this previously worked) , the widget that is placed in the background parameter of the FlexibleSpaceBar should fade out as the content is scrolled up. When scrolling back down, the widget should fade in again.

Actual results

The FlutterLogo jumps from completely visible to completely hidden (no fade).

Code sample

Code sample

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          const SliverAppBar(
            backgroundColor: Colors.red,
            expandedHeight: 300.0,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              background: FlutterLogo(),
              centerTitle: true,
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              childCount: 100,
              (context, index) => const SizedBox(
                height: 100,
                child: Center(
                  child: Text('something here'),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

flexible_space_bar_not_fading_AdobeExpress

Logs

Logs
[Paste your logs here]

Flutter Doctor output

Doctor output
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.10.4, on macOS 13.2.1 22D68 darwin-arm64, locale
    en-GB)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
[✗] Chrome - develop for the web (Cannot find Chrome executable at
    /Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[!] Android Studio (not installed)
[✓] IntelliJ IDEA Community Edition (version 2023.1.2)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 2 categories.

Metadata

Metadata

Assignees

Labels

Bot is counting down the days until it unassigns the issueP2Important issues not at the top of the work listc: regressionIt was better in the past than it is nowf: material designflutter/packages/flutter/material repository.f: scrollingViewports, list views, slivers, etc.found in release: 3.10Found to occur in 3.10found in release: 3.12Found to occur in 3.12frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions