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	Only Navbar

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

Before the table of content, hereby, you can find all of example from here. Enjoy!

Table of Content

• Getting Started
• SuperCupertinoNavigationBar Attributes
  • AppBarType Enum
• SearchFieldDecoration Attributes
  • SearchFieldBehaviour Enum
  • SearchResultHeader Attributes
  • Search Field Action Buttons
• AvatarModel Attributes

Getting Started

Add dependency

dependencies:
  super_cupertino_navigation_bar: latest_version

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(
      appBarType: 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

Attribute	Type	Annotation
largeTitle	Widget	Supply Text widget in order to get right transition animation
leading	Widget	You can add desired Widget left top of Navbar
automaticallyImplyLeading	bool	used for removing the back button, from the second screen after navigating to route
automaticallyImplyTitle	bool	If true and largeTitle is null, automatically fill in a Text() widget with the current route's title
alwaysShowMiddle	bool	This should be set to false if you only want to show largeTitle in expanded state and middle in collapsed state
physics	ScrollPhysics	SuperCupertinoNavigationBar has CustomScrollView in it. Physic is used to set CustomScrollView's physics
previousPageTitle	String	Manually specify the previous route's title when automatically implying the leading back button
middle	Widget	Widget to place in the middle of the navigation bar. Normally a title or a segmented control.
trailing	Widget	Widget to place at the end of the navigation bar. Normally additional actions taken on the page such as a search or edit function.
border	Border	The direction in which the widget content will line up
backgroundColor	Color	The background color of the navigation bar. If it contains transparency, the tab bar will automatically produce a blurring effect to the content behind it. Defaults to CupertinoTheme's scaffoldBackgroundColor if null.
collapsedBackgroundColor	Color	The background color of the collapsed navigation bar. If it contains transparency, the tab bar will automatically produce a blurring effect to the content behind it. Defaults to CupertinoTheme's barBackgroundColor if null.
brightness	Brightness	The brightness of the specified backgroundColor. Setting this value changes the style of the system status bar.
padding	EdgeInsetsDirectional	Padding for the contents of the navigation bar. Defaults: Vertically, sized to the same height as the navigation bar itself minus the status bar. Horizontally, padding will be 16 pixels
transitionBetweenRoutes	bool	Set true for transition between navigation bars
heroTag	Object	Tag for the navigation bar's Hero widget if transitionBetweenRoutes is true
stretch	bool	This specifies navbar behavior when negative scroll has been done. It moves with scroll contents when it's true. But it will be static on scrolling.
slivers	ListWidget	SuperCupertinoNavigationBar has CustomScrollView so place all of your children place here as Sliver Widget such as SliverToBoxAdapter etc.
scrollController	ScrollController	SuperCupertinoNavigationBar has own scrollController but if you want to add scrollController as custom, you can set here. this will be used as primary scrollController
appBarType	AppBarType (Enum)	AppBarType is an enum and it sets Appbar as Large Title or Normal Navbar and whether it has Search Bar or not. Values: LargeTitleWithPinnedSearch, LargeTitleWithFloatedSearch, LargeTitleWithoutSearch, NormalNavbarWithPinnedSearch, NormalNavbarWithFloatedSearch
searchFieldDecoration	SearchFieldDecoration (Model)	This is Search Field Model which you can find extended information below
avatarModel	AvatarModel (Model)	This is Avatar Model which you can find extended information below

AppBarType Enum

AppBarType values below;

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

---

SearchFieldDecoration Attributes

Attribute	Type	Annotation
controller	TextEditingController	SearchField TextEditingController
onChanged	ValueChangedString	get Text value onChange and do some Event
onSubmitted	ValueChangedString	get Text value onSubmit and do some Event
placeholderText	String	SearchField Placeholder Text Value
decoration	BoxDecoration	Style your search field
keyboardType	TextInputType	Select TextInputType
padding	EdgeInsetsGeometry	only horizontal padding is applicable
prefixIconColor	Color
placeholderColor	Color
prefixInsets	EdgeInsetsGeometry	padding around prefix icon
prefixIcon	Widget	Select desired Icon, default is Icon(CupertinoIcons.search)
suffixInsets	EdgeInsetsGeometry	padding around suffix icon
suffixIcon	Icon	Select desired Icon, default is Icon(CupertinoIcons.xmark_circle_fill)
onSuffixTap	VoidCallback	No return value supplied. Just Clears th search field and you can do some event
onCancelTap	VoidCallback	No return value supplied. Just Clears th search field and cancels search actions. Also you can do some event
paddingLeft	double
paddingRight	double
cancelButtonName	String
cancelButtonStyle	TextStyle
cursorColor	Color
onFocused	ValueChangedbool	triggers desired event on search field focus
hideSearchBarOnInit	bool	this is applicable only LargeTitleWithFloatedSearch and NormalNavbarWithFloatedSearch
searchFieldBehaviour	SearchFieldBehaviour (Enum)	This specifies result screen behavior. 3 behaviour may be set: ShowResultScreenAfterFieldInput, ShowResultScreenAfterFieldFocused, NeverShowResultScreen. Shown below
searchResultHeader	SearchResultHeader (Widget)	This is just model which is required to set height and child attributes
searchResultChildren	ListWidget	This appears according to SearchFieldBehaviour. You can set children here after desired action such as onChanged, onSubmitted etc.
actionButtons	ListSearchBarActionButton	This is just SearchBarActionButton Widget List
textStyle	TextStyle	Search field text style
placeholderTextStyle	TextStyle	Search field placeholder text style

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,
});

Search Field Action Buttons

There is actionButtons attribute in SearchFieldDecoration. This is List of SearchBarActionButton.

const SearchBarActionButton({
  super.key,
  required this.icon, // required attribute
  this.onPressed, // can be null
  this.actionButtonsBehaviour = 
    SearchFieldActionButtonsBehaviour.VisibleOnFocus, // Default value VisibleOnFocus
});

You can select action buttons behaviors also. There are 3 types of it's behavior.

Values;

enum SearchFieldActionButtonsBehaviour {
  AlwaysVisible, // This buttons will be always visible
  VisibleOnFocus, // This buttons will be only visible on search field has focus
  VisibleOnUnFocus, // This buttons will be only visible on search field has not focus
}

You will have such kind of buttons;

Visible On UnFocus	Visible On Focus

AvatarModel Attributes

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

Attribute	Type	Annotation
avatarUrl	String	write here url string of Image.asset(url)
avatarIsVisible	bool	default value is false
onTap	VoidCallback	Callback, set event onTap
avatarIconColor	Color	avatar icon default color is CupertinoColors.link
icon	IconData	you can change default icon which is CupertinoIcons.profile_circled

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.

Questions

Ask a question and ping me "k.s poyraz"

Found an issue or have a proposal?

Create an issue

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.