Skip to content

CupertinoSliverNavigationBar: expanded state should have transparent background #60411

Closed
Closed
CupertinoSliverNavigationBar: expanded state should have transparent background#60411
Labels
found in release: 3.3Found to occur in 3.3found in release: 3.7Found to occur in 3.7frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: cupertino_uicupertino_ui package in flutter/packagesteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Description

@cpboyd
cpboyd
opened on Jun 27, 2020

Steps to Reproduce

  1. Run flutter create bug.
  2. Create app with CupertinoSliverNavigationBar

Expected results:

Per iOS 13's native apps, the expanded titles have a transparent background (black in dark mode).

Actual results:

Flutter's CupertinoSliverNavigationBar still uses the translucent blur background on the expanded title.

Logs 
[✓] Flutter (Channel stable, v1.17.4, on Mac OS X 10.15.5 19F101, locale en-US)
    • Flutter version 1.17.4 at /Users/chris/dev/flutter
    • Framework revision 1ad9baa8b9 (9 days ago), 2020-06-17 14:41:16 -0700
    • Engine revision ee76268252
    • Dart version 2.8.4

 
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /Users/chris/Library/Android/sdk
    • Platform android-29, build-tools 29.0.3
    • Java binary at: /Users/chris/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/193.6514223/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.5, Build version 11E608c
    • CocoaPods version 1.9.3

[✓] Android Studio (version 4.0)
    • Android Studio at /Users/chris/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/193.6514223/Android Studio.app/Contents
    • Flutter plugin version 46.0.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[!] IntelliJ IDEA Ultimate Edition (version 2020.1.2)
    • IntelliJ at /Users/chris/Applications/JetBrains Toolbox/IntelliJ IDEA Ultimate.app
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • For information about installing plugins, see
      https://flutter.dev/intellij-setup/#installing-the-plugins

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

[✓] Connected device (1 available)
    • iPhone SE (2nd generation) • 4FA4B478-6343-403F-8F67-4CC377D4BF4B • ios • com.apple.CoreSimulator.SimRuntime.iOS-13-5 (simulator)

! Doctor found issues in 2 categories.

Activity

  1. iapicca commented on Jun 29, 2020

    @iapicca
    iapicca
    on Jun 29, 2020

    Hi @cpboyd
    I can see the translucent effect in this code sample
    (using a .5 opacity to make it easy to spot) with the latest master

    [✓] Flutter (Channel master, 1.20.0-3.0.pre.78, on Mac OS X 10.15.5 19F101, locale en-GB)
    • Flutter version 1.20.0-3.0.pre.78 at /Users/nevercode/development/flutter_master
    • Framework revision 2962912d68 (2 days ago), 2020-06-27 00:59:50 -0700
    • Engine revision fc0e27210c
    • Dart version 2.9.0 (build 2.9.0-19.0.dev 63cf56d925)


[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/nevercode/Library/Android/sdk
    • Platform android-29, build-tools 29.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.5, Build version 11E608c
    • CocoaPods version 1.9.0

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

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 46.0.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] VS Code
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.12.0

[✓] Connected device (4 available)
    • iPhone 11 Pro Max • D6967F45-CB0F-4D4E-AFD5-278816A21CAE • ios            • com.apple.CoreSimulator.SimRuntime.iOS-13-5 (simulator)
    • macOS desktop     • macos                                • darwin-x64     • Mac OS X 10.15.5 19F101
    • Web Server        • web-server                           • web-javascript • Flutter Tools
    • Chrome            • chrome                               • web-javascript • Google Chrome 83.0.4103.116

• No issues found!
  2. iapicca
    added
    p: cupertino_uicupertino_ui package in flutter/packages
    found in release: 1.20Found to occur in 1.20
    frameworkflutter/packages/flutter repository. See also f: labels.
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    on Jun 29, 2020

  3. cpboyd commented on Jun 29, 2020

    @cpboyd
    cpboyd
    on Jun 29, 2020
    Author

    @iapicca Exactly. However, the translucent header should only be in the compact mode as seen in iOS 13 Podcasts (and other Apple apps):

    Note how the background in the expanded state is fully black (no translucent effect), to match the list content:

    The expanded header should probably have a different setting. I'd initially suggested transparent to match the underlying content.

  4. cpboyd commented on Jun 29, 2020

    @cpboyd
    cpboyd
    on Jun 29, 2020
    Author

    @iapicca Here's how to achieve the behavior I'm specifying:
    cpboyd@8f71088

    Although, perhaps since Colors.transparent will still trigger the blur effect, maybe it should be an opaque white or black depending on the theme.

    If opaque, it'd also need a configurable parameter in case people have their list color different from defaults.

  5. TahaTesser
    assigned
    TahaTesser
    and unassigned
    TahaTesser
    on Oct 10, 2021

  6. Hixie commented on Feb 28, 2022

    @Hixie
    Hixie
    on Feb 28, 2022
    Contributor

    @cpboyd did some initial work on this here: #61242
    If anyone would like to continue that work that's probably a good place to start from. Please don't hesitate to reach out to us on the #hackers-new channel on Discord (see the contributing docs for details) if you would like help picking this up.

  7. maheshj01 commented on Dec 24, 2022

    @maheshj01
    maheshj01
    on Dec 24, 2022
    Member

    Reproduces on stable 3.3 and master 3.7

    expanded

    image

    collapsed

    image

    code sample 
    import 'package:flutter/cupertino.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
        title: 'Cupertino App',
        home: CupertinoPageScaffold(
          child: CustomScrollView(
            slivers: <Widget>[
              CupertinoSliverNavigationBar(
                largeTitle: Text('Large Title'),
              ),
              SliverFillRemaining(
                child: Center(
                  child: Text('Hello World'),
                ),
              ),
            ],
          ),
        ));
  }
}
    flutter doctor -v (mac) 
    [✓] Flutter (Channel master, 3.7.0-3.0.pre.33, on macOS 12.6 21G115 darwin-arm64, locale en-IN)
    • Flutter version 3.7.0-3.0.pre.33 on channel master 
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5201856805 (38 minutes ago), 2022-12-05 18:27:21 -0800
    • Engine revision a309d239c4
    • Dart version 2.19.0 (build 2.19.0-463.0.dev)
    • DevTools version 2.20.0
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly
      to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

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

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

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.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.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • 026D5789-9E78-4AD5-B1B2-3F8D4E7F65E4 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.6 21G115 darwin-arm64
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 108.0.5359.94

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

• No issues found!

    [✓] Flutter (Channel stable, 3.3.9, on macOS 12.6 21G115 darwin-arm, locale en-IN)
    • Flutter version 3.3.9 on channel stable at /Users/mahesh/Development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b8f7f1f986 (24 hours ago), 2022-11-23 06:43:51 +0900
    • Engine revision 8f2221fbef
    • Dart version 2.18.5
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

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

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

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.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.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • 026D5789-9E78-4AD5-B1B2-3F8D4E7F65E4 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.6 21G115 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 107.0.5304.110

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

• No issues found!
  8. maheshj01
    added
    found in release: 3.3Found to occur in 3.3
    found in release: 3.7Found to occur in 3.7
    and removed
    found in release: 1.20Found to occur in 1.20
    on Dec 24, 2022
  9. flutter-triage-bot
    added
    multiteam-retriage-candidate
    team-designOwned by Design Languages team
    triaged-designTriaged by Design Languages team
    on Jul 8, 2023

  10. proxiti commented on Aug 15, 2023

    @proxiti
    proxiti
    on Aug 15, 2023

    I found a temporary solution:

    Define a SpecialColor

    class SpecialColor extends Color {
  const SpecialColor() : super(0x00000000);

  @override
  int get alpha => 0xFF;
}

    Use it like

    CupertinoSliverNavigationBar(
      largeTitle: Text("title"),
      backgroundColor: const SpecialColor(),
);

    The reason is that the CupertinoSliderNavigationBar will determine alpha==0xFF, and if it is true, there will be no blur effect attached.

    If you want to achieve full transparency when expanding and semi transparency when collapsing, try the following code:

    import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class RealCupertinoSliverNavigationBar extends StatefulWidget {
  final ScrollController scrollController;
  final Widget? largeTitle;
  final Widget? leading;
  final bool? alwaysShowMiddle;
  final String? previousPageTitle;
  final Widget? middle;
  final Widget? trailing;
  final Color color;
  final Color darkColor;

  const RealCupertinoSliverNavigationBar(
      {super.key,
      required this.scrollController,
      this.largeTitle,
      this.leading,
      this.alwaysShowMiddle = false,
      this.previousPageTitle,
      this.middle,
      this.trailing,
      this.color = Colors.white,
      this.darkColor = Colors.black});

  @override
  State<RealCupertinoSliverNavigationBar> createState() => _NavState();
}

class _NavState extends State<RealCupertinoSliverNavigationBar> {
  final _threshold = 52;
  bool _isCollapsed = false;

  @override
  void initState() {
    super.initState();
    widget.scrollController.addListener(() {
      if (widget.scrollController.offset >= _threshold && !_isCollapsed) {
        setState(() {
          _isCollapsed = true;
        });
      } else if (widget.scrollController.offset < _threshold && _isCollapsed) {
        setState(() {
          _isCollapsed = false;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    final isDark = CupertinoTheme.maybeBrightnessOf(context) == Brightness.dark;

    return CupertinoSliverNavigationBar(
      largeTitle: widget.largeTitle,
      stretch: true,
      backgroundColor: _isCollapsed
          ? isDark
              ? const Color.fromRGBO(45, 45, 45, 0.5)
              : Colors.white.withOpacity(0.5)
          : const _SpecialColor(),
      border: Border(
        bottom: BorderSide(
          color: _isCollapsed
              ? isDark
                  ? Colors.white.withOpacity(0.5)
                  : Colors.black.withOpacity(0.5)
              : const _SpecialColor(),
          width: 0.0, // 0.0 means one physical pixel
        ),
      ),
    );
  }
}

// SpecialColor to remove CupertinoSliverNavigationBar blur effect
class SpecialColor extends Color {
  const SpecialColor() : super(0x00000000);

  @override
  int get alpha => 0xFF;
}

    Use it like:

    class _AppHomeState extends State<AppHome> {
  final scrollController = ScrollController();
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
        child: Container(
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/bg.jpg'),
          fit: BoxFit.cover,
        ),
      ),
      child: CustomScrollView(
        controller: scrollController,
        slivers: <Widget>[
          RealCupertinoSliverNavigationBar(
            scrollController: scrollController,
            largeTitle: const Text("Mine"),
          ),
          const SliverFillRemaining(
            child: Text("content"),
          ),
        ],
      ),
    ));
  }
}

    It should be noted that this is only a temporary solution, and a final and complete solution requires submission of a PR.

  11. Hixie
    removed
    multiteam-retriage-candidate
    on Mar 6, 2024
  12. auto-submit
    added a commit that references this issue on Jul 3, 2024

    Cupertino transparent navigation bars (#149102)

    6e246ac
  13. victorsanni
    added a commit that references this issue on Jul 8, 2024

    Cupertino transparent navigation bars (flutter#149102)

    6583eb9

  14. victorsanni commented on Aug 12, 2024

    @victorsanni
    victorsanni
    on Aug 12, 2024
    Contributor

    @veloce does #149102 fix this issue?

  15. cpboyd
    closed this as completedon Aug 21, 2024
  16. github-project-automation
    added this to iOS Platform - Cupertino widget reviewon Aug 28, 2024
  17. github-project-automation
    moved this to Engineer reviewed in iOS Platform - Cupertino widget reviewon Aug 28, 2024

  18. github-actions commented on Sep 4, 2024

    @github-actions
    github-actionsbot
    on Sep 4, 2024 – with 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.

  19. github-actions
    locked as resolved and limited conversation to collaborators on Sep 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    found in release: 3.3Found to occur in 3.3found in release: 3.7Found to occur in 3.7frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: cupertino_uicupertino_ui package in flutter/packagesteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

    Type

    No type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions