How can I change the height of CupertinoNavigationBar in Flutter?

2.6k views Asked by At

I want to increase CupertinoNavigationBar heigth. The code is like this:

child: CustomCupertinoNavigationBar(
         padding: EdgeInsetsDirectional.zero,
         backgroundColor: Colors.white,
         middle: Semantics(
           label: "dashboard-main-page-title",
           child: Text(
             "My Title",
             style: TextStyles.HankenSans_Bold_18_PrimaryBlack,
             key: Key('dashboard-main-page-title'),
           ),
         ),
         leading: Semantics(
           label: "dashboard-back-button",
           child: Material(
             color: Colors.white,
             child: CustomBackButton(
               onPressHandler: () {
                 Navigation().openMyAccountPage();
               },
             ),
           ),
         ),
       );

I tried creating my own custom cupertino. I copied the cupertino/nav_bar.dart and changed _kNavBarPersistentHeight parameter as const double _kNavBarPersistentHeight = 58.0; but it resulted at two navigation bars in IOS. Can anybody help me with this? Much appreciated.

1

There are 1 answers

0
desdemona On

I solved this problem as

appBar: PreferredSize(
        preferredSize: Size.fromHeight(100.0),
        child: Container(
          height: 120,
          child: CupertinoNavigationBar(
            padding: EdgeInsetsDirectional.zero,
            backgroundColor: Colors.white,
            middle: Semantics(
              label: "dashboard-main-page-title",
              child: Text(
                CustomerLoyaltyLocalizations.instance.dashboardMainPageTitle,
                style: TextStyles.HankenSans_Bold_18_PrimaryBlack,
                key: Key('dashboard-main-page-title'),
              ),
            ),
            leading: Semantics(
              label: "dashboard-back-button",
              child: Material(
                color: Colors.white,
                child: CustomBackButton(
                  onPressHandler: () {
                    Navigation().openMyAccountPage();
                  },
                ),
              ),
            ),
          ),
        ),
      ),

First I used PreferredSize and then Container widget before CupertinoNavigationBar.