How to increase height of CupertinoSliverNavigationBar

Question

I was trying to clone WhatsApp(iOS version) with flutter using Cupertino Widgets.

while trying to make the header with CupertinoSliverNavigationBar i noticed that the height of CupertinoSliverNavigationBar cannot be increased.

My Code

return CupertinoPageScaffold(
      child: NotificationListener<ScrollNotification>(
        onNotification: (scrollNotification) {
          if (scrollNotification is ScrollStartNotification) {
            _onStartScroll(scrollNotification.metrics);
          } else if (scrollNotification is ScrollUpdateNotification) {
            _onUpdateScroll(scrollNotification.metrics);
          } else if (scrollNotification is ScrollEndNotification) {
            _onEndScroll(scrollNotification.metrics);
          }
        },
        child: CustomScrollView(
          slivers: <Widget>[
            CupertinoSliverNavigationBar(
              leading: GestureDetector(
                child: Padding(
                  padding: EdgeInsets.only(top: 10.0),
                  child: Text(
                    "Edit",
                    style: TextStyle(
                      color: Constants.primaryColor,
                      fontSize: 18.0,
                    ),
                  ),
                ),
                onTap: ()=>print("Tapped"),
              ),

              trailing: GestureDetector(
                child: Icon(
                  CupertinoIcons.create_solid,
                  size: 25.0,
                ),
                onTap: ()=>print("Tapped"),
              ),
              automaticallyImplyLeading: false,
              largeTitle: Column(
                children: <Widget>[
                  Container(
                    child: Text(
                      "Chats",
                      textAlign: TextAlign.left,
                    ),
                  ),
                  GestureDetector(
                    child: SearchBar(),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );

Screenshots below:

What i want to achieve

What i got

Is there any work around or anyway to increase the height? Thanks!

Hello I am trying to clone whatsap too..Can I have the source code for it to guide me through it? — Samuel, Jun 25 '22 at 02:05

score 3 · Accepted Answer · answered Jun 12 '19 at 04:20

Flutter purists and advocates will kill me, but those sizes are part of the constants values (like MaterialDesign guidelines values), 2 quick options:

Option 1: Modify the SDK directly: Ctrl (or Cmd) + click in CustomScrollView, will open flutter/lib/src/cupertino/nav_bar.dart

Modify line 22 or 26:

/// This height is constant and independent of accessibility as it is in iOS.
const double _kNavBarPersistentHeight = 44.0;

/// Size increase from expanding the navigation bar into an iOS-11-style large title
/// form in a [CustomScrollView].
const double _kNavBarLargeTitleHeightExtension = 52.0; // change this one!

Option 2: copy nav_bar.dart directly in your project, and modify it, or better yet, grab all the dependencies of CustomScrollView(), and put ur own name, and ur own values there... I guess that beyond being a standard design guideline from Apple, the ability to change those values are required for several devs. We should open a Github request maybe.

Hope you find my "hacky" solution useful!

Result:

score 1 · Answer 2 · answered Jul 14 '21 at 20:38

1

You don't need to modify the SDK or something like that. I have found a simple solution.

add this to CustomScrollView, adjust the anchor until you get a good UI. CustomScrollView( anchor: 0.07,

See the image here

answered Jul 14 '21 at 20:38

fpatelm

56
3

How to increase height of CupertinoSliverNavigationBar

2 Answers2