How to increase height of CupertinoSliverNavigationBar

Issue

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!

Solution

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:

Answered By – roipeker

Answer Checked By – Timothy Miller (FlutterFixes Admin)