CupertinoSliverNavigationBar & CupertinoNavigationBar should support differing style||widget for largeTitle and middle #53788

Activity

1. VladyslavBondarenko

   added

   p: cupertino_uicupertino_ui package in flutter/packagescupertino_ui package in flutter/packages

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

   c: proposalA detailed proposal for a change to FlutterA detailed proposal for a change to Flutter

   on Apr 2, 2020
2. jackie099 commented on May 21, 2020

   

   jackie099

   on May 21, 2020

   More actions

   That will be nice to have. Also, CupertinoSliverNavigationBar needs a slight visual update to match what it looks on iOS13.
3. xster commented on Oct 30, 2020

   

   xster

   on Oct 30, 2020

   Member

   More actions

   @shamilovtim I'm not sure I understood the bug. Could you describe a bit more what the desired behavior is? Having some flag to allow the middle widget on top and the largeTitle below to appear simultaneously? Do you have a native iOS example to model after?

   @jackie099 let's keep bugs single purposed. Could you open a separate issue to describe the visual update you meant?
4. shamilovtim commented on Oct 30, 2020

   

   shamilovtim

   on Oct 30, 2020

   Author

   More actions

   @xster thanks for responding. The middle position and the large position are not customizable separately and cannot have separate typography. If you use the middle property in order to customize the middle position, it doesn't have the desired effect because it will appear overtop of your largetitle. Overall, there is no way to customize the typography of the two separate elements at the same time. You can only customize largetitle, but you cannot customize both at the same time.
5. xster commented on Oct 30, 2020

   

   xster

   on Oct 30, 2020

   Member

   More actions

   Thanks for the details. I'm still trying to parse the action item.

   The middle position and the large position are not customizable separately

   Can't you supply a middle and a largeTitle widget separately with whatever customization you need?

   cannot have separate typography

   They receive a default DefaultTextStyle above those widgets but whatever text styling your supply to the actual widgets themselves take priority.

   it doesn't have the desired effect because it will appear overtop of your largetitle

   I imagine this is the main ask? Add a shouldTheMiddleWidgetYouSuppliedFadeAwayWhenTheLargeTitleAppears type flag?

   Overall, there is no way to customize the typography of the two separate elements at the same time.

   I think that's true. Maybe so by design since the font are different. Perhaps you're asking for a way to force some subset of the styling (excluding font size, letter spacing etc) to be the same via a single inherited widget? Unless this is a big impediment, I'd consider this a low-prio ask since the fonts are indeed different by design.
6. shamilovtim commented on Oct 30, 2020

   

   shamilovtim

   on Oct 30, 2020

   Author

   More actions

   Can't you supply a middle and a largeTitle widget separately with whatever customization you need?

   No you cant if you use the 'middle' widget it unceremoniously appears while the largeTitle is active (which according to the docs isn't a bug, but I don't understand why that's not a bug).

   I imagine this is the main ask? Add a shouldTheMiddleWidgetYouSuppliedFadeAwayWhenTheLargeTitleAppears type flag?

   Yes that would be one way of solving this issue

   I think that's true. Maybe so by design since the font are different. Perhaps you're asking for a way to force some subset of the styling (excluding font size, letter spacing etc) to be the same via a single inherited widget? Unless this is a big impediment, I'd consider this a low-prio ask since the fonts are indeed different by design.

   No I'm specifically asking that there be an option for them to be considered separate widgets. Consider this: for whatever reason a dev wants them to be two different colors, typefaces, weighs, etc. in the middle state or the large state. It's not about stopping/enforcing inheritance, it's about allowing two separate styles.

   👍React with 👍6Reacted by delbyze, Opservo, Gabriel Royer, Aurélien Lepage, Truls Matias Torgersen and Dmytro Polishenko
7. holland-hng commented on Nov 10, 2020

   

   holland-hng

   on Nov 10, 2020

   More actions

   i have same isssue :v
8. GabRoyer commented on Mar 15, 2021

   

   GabRoyer

   on Mar 15, 2021

   More actions

   No you cant if you use the 'middle' widget it unceremoniously appears while the largeTitle is active (which according to the docs isn't a bug, but I don't understand why that's not a bug).

   I'm surprised that this isn't a bug. From the docs:

   For advanced uses, an optional middle widget can be supplied to show a different widget in the middle of the navigation bar when the sliver is collapsed.

   This to me implies that the middle widget wouldn't show up when the sliver is not collapsed.

   👍React with 👍4Reacted by Truls Matias Torgersen, Sergio Molchanovsky, Simon and Dmytro Polishenko
9. kstam commented on Jun 19, 2021

   

   kstam

   on Jun 19, 2021

   More actions

   The bug seems to be here btw. I wonder if this is a parameter that should be passed into the Cupertino header instead of the current logic. Changing this line to false makes the header behave as per the description.
   https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/cupertino/nav_bar.dart#L716

   👍React with 👍2Reacted by Truls Matias Torgersen and Simon
10. subzero911 commented on Jan 27, 2022

    

    subzero911

    on Jan 27, 2022

    Last edited by subzero911

    More actions

    I have the similar issue.
    If I supply just Text widget as a largeTitle, everything works okay: large title and small middle text on scroll.
    But if I style it, both largeTitle and middle share the same style. And large middle text looks ugly.

    upd.
    I managed to do that, but that's not easy.
    I wrapped by NavBar into CupertinoTheme and set custom sizes for titles.

    CupertinoTheme(
              data: CupertinoThemeData(
                textTheme: CupertinoTextThemeData(
                  navLargeTitleTextStyle: TextStyle(fontSize: 32, color: Colors.black),
                  navTitleTextStyle: TextStyle(fontSize: 18, color: Colors.black),              
                ),
                barBackgroundColor: Colors.white,
              ),
              child: CustomScrollView(
                slivers: [
                  CupertinoSliverNavigationBar(
                    largeTitle: Text('Афиша'),
                    leading: IconButton(
                      color: AppConstants.blackColor,
                      icon: Icon(Icons.arrow_back, color: AppConstants.blackColor, size: 28),
                      onPressed: () => Navigator.of(context).pop(),
                    ),
                  ),

    👍React with 👍2Reacted by Vlad and kpk-i710
11. SimonVillage commented on Mar 12, 2022

    

    SimonVillage

    on Mar 12, 2022

    More actions

    Is someone willing to make a PR for this?
12. flutter-triage-bot

    added

    multiteam-retriage-candidate

    team-designOwned by Design Languages teamOwned by Design Languages team

    triaged-designTriaged by Design Languages teamTriaged by Design Languages team

    on Jul 8, 2023
13. Hixie

    removed

    multiteam-retriage-candidate

    on Mar 6, 2024
14. Piinks

    added

    workaround availableThere is a workaround available to overcome the issueThere is a workaround available to overcome the issue

    P2Important issues not at the top of the work listImportant issues not at the top of the work list

    on Aug 22, 2024
15. Piinks

    changed the title [-]CupertinoSliverNavigationBar largeTitle cannot be customized in its middle state[/-] [+]CupertinoSliverNavigationBar & CupertinoNavigationBar should support differing style||widget for `largeTitle` and `middle`[/+] on Aug 22, 2024
16. Piinks

    added

    P3Issues that are less important to the Flutter projectIssues that are less important to the Flutter project

    and removed

    P2Important issues not at the top of the work listImportant issues not at the top of the work list

    on Aug 22, 2024
17. victorsanni commented on Sep 27, 2024

    

    victorsanni

    on Sep 27, 2024

    Contributor

    More actions

    Hi @shamilovtim @SimonVillage is this still an issue? I'm able to customize the largeTitle and middle properties separately in CupertinoSliverNavigationBar with the flag alwaysShowMiddle set to false.

    
18. victorsanni commented on Oct 12, 2024

    

    victorsanni

    on Oct 12, 2024

    Contributor

    More actions

    Closing as duplicate of #113542.
19. victorsanni

    closed this as completedon Oct 12, 2024
20. github-actions commented on Oct 26, 2024

    

    github-actionsbot

    on Oct 26, 2024 – with GitHub Actions

    More 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.
21. github-actions

    locked as resolved and limited conversation to collaborators on Oct 26, 2024