Skip to content

FadeForwardsPageTransitionsBuilder flickers for AppBars with dark background #179585

Description

@olischne

Steps to reproduce

Using FadeForwardsPageTransitionsBuilder (e. g. in Android or by setting it by hand like in the example).

  1. Create two screens each containing a Scaffold with an AppBar with a dark background.
  2. Navigate from the first screen to the second and back.

Expected results

The AppBar should keep its dark color while navigating.

Actual results

The AppBar flickers to a bright color.

Code sample

Code sample
import 'package:flutter/material.dart';

/// Based on https://api.flutter.dev/flutter/material/FadeForwardsPageTransitionsBuilder-class.html
/// changed AppBar backgroundColor to black and removed unnecessary parts

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        pageTransitionsTheme: PageTransitionsTheme(
          builders: Map<TargetPlatform, PageTransitionsBuilder>.fromIterable(
            TargetPlatform.values,
            value: (_) => const FadeForwardsPageTransitionsBuilder(),
          ),
        ),
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        foregroundColor: Colors.white,
        backgroundColor: Colors.black,
      ),
      body: Center(
        child: FilledButton(
          onPressed: () {
            Navigator.of(context).push(MaterialPageRoute(builder: (context) => SecondPage()));
          },
          child: Text("Navigate"),
        ),
      ),
    );
  }
}


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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        foregroundColor: Colors.white,
        backgroundColor: Colors.black,
      ),
      body: Center(child: Text("Second Screen")),
    );
  }
}

Screenshots or Video

Video demonstration
Screen.Recording.2025-12-08.at.18.19.56.mov

Logs

No response

Flutter Doctor output

Also reproducible on DartPad

Doctor output
[✓] Flutter (Channel stable, 3.38.4, on macOS 26.1 25B78 darwin-arm64, locale en-DE) [463ms]
    • Flutter version 3.38.4 on channel stable at /Users/olischne/fvm/versions/stable
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 66dd93f9a2 (5 days ago), 2025-12-03 14:56:10 -0800
    • Engine revision a5cb96369e
    • Dart version 3.10.3
    • DevTools version 2.51.1
    • Feature flags: enable-web, enable-linux-desktop, enable-macos-desktop, enable-windows-desktop, enable-android, enable-ios, cli-animations, enable-native-assets, omit-legacy-version-file,
      enable-lldb-debugging

[✓] Android toolchain - develop for Android devices (Android SDK version 36.1.0) [1,663ms]
    • Android SDK at /Users/olischne/Library/Android/sdk
    • Emulator version 36.3.10.0 (build_id 14472402) (CL:N/A)
    • Platform android-36, build-tools 36.1.0
    • Java binary at: /Users/olischne/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 21.0.8+-14196175-b1038.72)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 26.0.1) [1,391ms]
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 17A400
    • CocoaPods version 1.16.2

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

[✓] Connected device (4 available) [9.3s]
    • sdk gphone64 arm64 (mobile) • emulator-5554                        • android-arm64  • Android 16 (API 36) (emulator)
    • iPhone 17 Pro (mobile)      • 87B49BC9-D1F0-4E16-8744-53847B35AA7D • ios            • com.apple.CoreSimulator.SimRuntime.iOS-26-0 (simulator)
    • macOS (desktop)             • macos                                • darwin-arm64   • macOS 26.1 25B78 darwin-arm64
    • Chrome (web)                • chrome                               • web-javascript • Google Chrome 143.0.7499.40

[✓] Network resources [1,751ms]
    • All expected network resources are available.

• No issues found!

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work listf: material designflutter/packages/flutter/material repository.found in release: 3.38Found to occur in 3.38found in release: 3.40Found to occur in 3.40frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions