Super Cupertino Navigation Bar

Flutter Extension

Super Cupertino Navigation Bar

Customize your iOS-style navigation bar and elevate the user experience of your project.

As a developer who appreciates Cupertino’s elegant design, wouldn’t you want to add this custom package to your app in development? The Super Cupertino Navigation Bar helps you create an iOS-style navigation bar while allowing you to add a search field and customize avatars.

Floated Large Title	Pinned Large Title	Only Large Title
Normal Navbar Floated	Normal Navbar Pinned

It’s been necessary from the beginning, and I just did it.

Why Should You Use Super Cupertino Navigation Bar?

1. iOS-Style Navigation Bar: Offer a more familiar experience to your iOS users. The Super Cupertino Navigation Bar reflects the native look and feel of iOS devices.

2. Search Field: Help users find content in your app more quickly and easily. Provide users with the ability to search.

3. Avatar Customization: Empower users to personalize their profiles. Customizable avatar addition is a fantastic way to recognize and customize users.

4. Perfect Compatibility: Seamlessly integrates with the Cupertino library. It works harmoniously with other components of your Flutter app.

5. Transition Animations: With this extension, you can have all transition animation on page route.

Okay! Let’s dive deep!

Examples. Enjoy!

Table of Content

• Getting Started
• SuperCupertinoNavigationBar Attributes
  • AppBarType Enum
• SearchFieldDecoration Attributes
  • SearchFieldBehaviour Enum
  • SearchResultHeader Attributes
• AvatarModel Attributes

Getting Started

Add dependency

dependencies:
  super_cupertino_navigation_bar: ^1.0.0

Add import package

import 'package:super_cupertino_navigation_bar/super_cupertino_navigation_bar.dart';

Easy to use

SuperCupertinoNavigationBar widget has CustomScrollView widget in it so you should place your children in slivers key whose type List.

CupertinoPageScaffold(  //inside CupertinoPageScaffold
  child: SuperCupertinoNavigationBar(
      largeTitleType: AppBarType.LargeTitleWithFloatedSearch, // Set desired AppBarType
      avatarModel: AvatarModel(
        avatarUrl: null,
        avatarIsVisible: true, // Avatar is hidden as default, if you want to set visible, simply set true
        onTap: () => print("some event"),
      ),
      largeTitle: const Text('Home'),
      searchFieldDecoration: SearchFieldDecoration(
          hideSearchBarOnInit: true,
          searchFieldBehaviour: SearchFieldBehaviour.ShowResultScreenAfterFieldInput, // There are 3 SearchFieldBehaviour
      ),
      slivers: [
        // Any Sliver here
      ],
  ),
);

SuperCupertinoNavigationBar Attributes

AppBarType Enum

AppBarType values below;

enum AppBarType {
  LargeTitleWithPinnedSearch,
  LargeTitleWithFloatedSearch,
  LargeTitleWithoutSearch,
  NormalNavbarWithPinnedSearch,
  NormalNavbarWithFloatedSearch,
}

SearchFieldDecoration Attributes

SearchFieldBehaviour Enum

SearchFieldBehaviour values below;

enum SearchFieldBehaviour {
  ShowResultScreenAfterFieldInput,
  ShowResultScreenAfterFieldFocused,
  NeverShowResultScreen,
}

Let’s look at expected behaviour;

ShowResultScreenAfterFieldInput	ShowResultScreenAfterFieldFocused	NeverShowResultScreen

SearchResultHeader

After search field action, result screen will appear and in this screen below the search bar you can place any widget you want! Let’s look at picture

Example 1 Apple Music	Example 2 Apple Music

const SearchResultHeader({
  super.key,
  required this.height,
  required this.child,
});

AvatarModel Attributes

You can set avatar like Apple Applications do. See the required model attributes;

AvatarModel({
  this.avatarUrl,
  this.avatarIsVisible = false,
  this.onTap,
  this.avatarIconColor = CupertinoColors.link,
  this.icon = CupertinoIcons.profile_circled,
});

Some Notices

1. If you want to use default navigation bar, you can use simply this way;

CupertinoPageScaffold(
  navigationBar: DefaultCupertinoNavigationBar( // same as CupertinoNavigationBar but little differencies
  backgroundColor: CupertinoColors.systemGrey.withOpacity(0.5),
  middle: const Text('CupertinoNavigationBar Sample'),
  )
);

2. Without using default navigation bar, You can use SuperCupertinoNavigationBar without largeTitle. Simply use this value;

CupertinoPageScaffold(  //inside CupertinoPageScaffold
  child: SuperCupertinoNavigationBar(
    largeTitleType: AppBarType.NormalNavbarWithoutSearch, // This will make appbar like CupertinoNavigationBar
    middle: Text("Home")
    slivers: [
      // Any Sliver here
    ],
  ),
);

in these case, you should be aware of you will use custom scroll view and sliver widgets.

Contribute and Provide Feedback

If you wish to contribute to this project, take a look at my GitHub repository and report any issues or bugs. You can help me further improve the project!

License

This package is licensed under the MIT License. For detailed information, check the LICENSE file.

GitHub

View Github