Super Cupertino Navigation Bar V2

Flutter Extension

Super Cupertino Navigation Bar

As a developer passionate about Apple UI/UX designs, I felt that Flutter lacked sufficient support for a widget that I wanted to develop. CupertinoSliverNavigationBar does not provide support for a search bar and a bottom app bar. Additionally, even if you were to add them as Slivers, creating a built-in animation and, furthermore, implementing Apple transition animations during page transitions would be challenging. This plugin frees you from this burden.

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

Large Title, SearchBar and Bottom	Large Title and Bottom

🚀🚀 WEB DEMO 🚀🚀

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

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

Why Should You Use Super Cupertino Navigation Bar?

Using SuperScaffold provides several advantages and additional features compared to the standard Scaffold in Flutter. Here are some reasons why you might consider using SuperScaffold:

1. Configurability: SuperScaffold allows you to easily configure and customize various parts of the app bar, including the title, large title, search bar, and bottom bar. This provides flexibility in adapting the app bar to the specific design requirements of your application.

2. Search Bar Integration: With SuperScaffold, you can integrate a search bar (SuperSearchBar) directly into the app bar, complete with customizable behavior, animation, and callbacks for handling user input.

3. Large Title Support: The SuperLargeTitle feature enables the use of large titles in the app bar, which can be particularly useful in applications with a prominent navigation hierarchy.

4. Bottom Bar Options: The SuperAppBarBottom feature allows you to add a bottom bar below the app bar, providing additional space for interactive elements or navigation controls.

5. Consistent Theming: SuperScaffold includes theming options to ensure a consistent look and feel throughout your application. You can customize colors, borders, and other visual aspects easily.

Okay! Let's dive deep!

Examples

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

Super Cupertino Navigation Bar

• Getting Started
  • Add Dependency
  • Easy to Use

SuperScaffold

• Additional Features and Customization Options
• SuperAppBar
  • Parameters
  • Example Usage
• SuperLargeTitle
  • Parameters
  • Example Usage
• SuperSearchBar
  • Parameters
  • SearchResultHeader Class
  • Enums
  • Example Usage
• SuperAppBarBottom
  • Parameters
  • Example Usage

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

Scaffold(
  backgroundColor: Theme.of(context).scaffoldBackgroundColor,
  body: SuperScaffold(
      appBar: SuperAppBar(
        title: Text("Hello SuperScaffold"),
        largeTitle: SuperLargeTitle(
          enabled: true,
          largeTitle: "Welcome",
        ),
        searchBar: SuperSearchBar(
          enabled: true,
          onChanged: (query) {
            // Search Bar Changes
          },
          onSubmitted: (query) {
            // On Search Bar submitted
          },
          searchResult: /* ... */,
          // Add other search bar properties as needed
        ),
        bottom: SuperAppBarBottom(
          enabled: true,
          height: 40,
          child: YourCustomBottomWidget(), // Any widget of yours
        ),
      ),
      body: SingleChildScrollView( // You can use CustomScrollView or any Widget desired
        child: Column(
          children: [
              Card(
                // Playground card
                // Add your onTap logic for Playground card
              ),
              Card(
                // List of example cards
                // Add your ListView.separated logic for example cards
              ),
            ],
          ),
        ),
    );

SuperScaffold

SuperScaffold is an extended version of the Flutter Scaffold widget with additional features and customization options.

Additional Features and Customization Options

• stretch: If true, the SuperScaffold will stretch to occupy the available space.
• transitionBetweenRoutes: If true, enables transition animations between routes.
• appBar: An instance of SuperAppBar for customizing the app bar.
• onCollapsed: A callback function invoked when the app bar is collapsed.
• scrollController: A custom scroll controller for the body of the SuperScaffold.
• body: body attribute can now be any widget you want. SingleChildScrollView, CustomScrollView or etc...

Feel free to use this extended SuperScaffold in your Flutter application for enhanced customization and additional features. Adjust the parameters according to your application's requirements.

SuperAppBar

SuperAppBar is a customizable Flutter widget that extends the functionality of the default AppBar. It provides enhanced features such as a search bar, large title, and additional customization options.

Parameters

Example Usage

SuperAppBar(
  title: Text("My App"),
  actions: const [Icon(Icons.search), Icon(Icons.more_vert)],
  previousPageTitle: "Home",
  searchBar: SuperSearchBar(),
  largeTitle: SuperLargeTitle(),
  bottom: SuperAppBarBottom(),
  backgroundColor: Colors.black,
  bottomBorder: const BorderSide(color: Colors.grey, width: 1),
  shadowColor: Colors.grey,
);

Feel free to customize the SuperAppBar based on your specific design requirements in your Flutter application!

SuperLargeTitle

SuperLargeTitle is a Flutter widget designed to display a large and prominent title. It offers customization options for styling and layout.

Parameters:

Example Usage

SuperLargeTitle(
  enabled: true, // default value is true
  largeTitle: "Super Human",
  actions: [
    IconButton(
      icon: Icon(Icons.settings),
      onPressed: () {
        // Handle settings button press
      },
    ),
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {
        // Handle search button press
      },
    ),
  ],
  textStyle: TextStyle(
    color: Colors.blue,
    fontSize: 40.0,
    fontWeight: FontWeight.bold,
  ),
)

Feel free to customize the SuperLargeTitle in your Flutter application to create visually appealing and informative large titles.

SuperSearchBar

SuperSearchBar is a customizable Flutter widget that provides a flexible and feature-rich search bar for your application. It includes various options for styling, behavior, and interaction.

Parameters:

Example Usage:

SuperSearchBar(
  enabled: true,
  resultBehavior: SearchBarResultBehavior.visibleOnInput,
  onChanged: (query) {
    // Handle changes in the search bar
    print("Search bar changed: $query");
  },
  onSubmitted: (query) {
    // Handle submission of the search bar
    print("Search bar submitted: $query");
  },
),

Feel free to integrate and customize the SuperSearchBar in your Flutter application to create a powerful and visually appealing search experience! Adjust the parameters according to your application's requirements.

SuperAction

Enums

SearchBarScrollBehavior

enum SearchBarScrollBehavior {
  pinned,
  floated,
}

SearchBarAnimationBehavior

enum SearchBarAnimationBehavior {
  top,
  steady,
}

SearchBarResultBehavior

enum SearchBarResultBehavior {
  visibleOnFocus,
  visibleOnInput,
  neverVisible,
}

SuperActionBehavior

enum SuperActionBehavior {
  alwaysVisible,
  visibleOnFocus,
  visibleOnUnFocus,
}

Feel free to integrate and customize the SuperSearchBar in your Flutter application to create a powerful and visually appealing search experience!

Let's look at expected behaviour;

SearchBarResultBehavior.visibleOnInput	SearchBarResultBehavior.visibleOnFocus	NeverShowResultScreen

SuperAppBarBottom

SuperAppBarBottom is a Flutter widget designed to provide additional content at the bottom of the SuperAppBar. It offers customization options for content, height, visibility, and color.

Parameters:

Example Usage

SuperAppBarBottom(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      IconButton(
        icon: Icon(Icons.home),
        onPressed: () {
          // Handle home button press
        },
      ),
      IconButton(
        icon: Icon(Icons.notifications),
        onPressed: () {
          // Handle notifications button press
        },
      ),
      IconButton(
        icon: Icon(Icons.person),
        onPressed: () {
          // Handle profile button press
        },
      ),
    ],
  ),
  height: 50.0,
  enabled: true,
  color: Colors.blue,
)

Feel free to customize the SuperAppBarBottom in your Flutter application to add additional functionality or navigation options to your app bar.

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.