Search packages, repositories and app categories

Package detailsv1.1.6

ios_search_appbar

iOS-style collapsible app bar with beautifully animated search bar

AndroidiOSWebmacOSWindowsLinux
30-day downloads
30
Likes
35
Pub points
125

Install package

flutter pub add ios_search_appbar

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter package that implements an iOS-style collapsible app bar featuring a smoothly animated search bar. Designed to mimic the native iOS experience, it provides a sleek, responsive interface where the search bar expands and collapses with intuitive gestures. The animation is fluid and customizable, enhancing user engagement in search-heavy applications. It supports multiple platforms including Android, iOS, Web, macOS, Windows, and Linux, making it versatile for cross-platform development.

Use cases

  • Implementing iOS-like search interfaces
  • Creating dynamic app bars with search functionality
  • Enhancing user experience in content-heavy apps
  • Building responsive search UIs across platforms
  • Designing modern, animated navigation bars

Key features

  • iOS-style collapsible app bar
  • Smooth animated search bar
  • Gesture-driven expansion and collapse
  • Cross-platform compatibility
  • Customizable animations and styling
  • Support for multiple target platforms

Suitable for

  • Developers targeting iOS design aesthetics
  • Apps requiring advanced search UIs
  • Cross-platform projects needing consistent search experiences
  • Design-focused Flutter applications
  • Teams prioritizing smooth animations and UX

Considerations

  • May require additional styling for non-iOS themes
  • Performance impact with complex nested widgets
  • Limited customization beyond core animation
  • Best suited for single-search scenarios
  • Requires careful integration with existing app bar layouts

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

iOS Search AppBar

The iOS Search AppBar package is a Flutter library that provides a collapsible app bar and a beautiful search bar animation, giving your Flutter app an iOS-style look and feel. It is fully customizable and compatible with both iOS and Android platforms.

demo_gif

Usage

Add the ios_search_appbar package to your pubspec.yaml file:

dependencies:
  ios_search_appbar: ^1.1.1

Import the package in your Dart code:

import 'package:ios_search_appbar/cupertino_search_appbar.dart';

Use CupertinoSearchAppBar by passing your content to the slivers parameter:

CupertinoSearchAppBar(
  slivers: [
    // Your slivers go here
  ],
)

Example:

class Example extends StatelessWidget {
  const Example({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CupertinoSearchAppBar(
      //to customize search bar, use:
      searchFieldProperties: SearchFieldProperties(),
      //to customize app bar, use:
      appBarProperties: AppBarProperties(),
      //if you want to add refresh then add like this
      refreshSliver: CupertinoSliverRefreshControl(
        onRefresh: () async {
        },
        builder: (context, refreshState, pulledExtent,
            refreshTriggerPullDistance, refreshIndicatorExtent) {
          // return Container(color: Colors.red, width: 500, height: 200,);
          return buildRefreshIndicator(
              context,
              refreshState,
              pulledExtent,
              refreshTriggerPullDistance,
              refreshIndicatorExtent,
              true);
        },
        refreshIndicatorExtent: 40,
      ),
      slivers: [
        //under the hood this package places other necessary sliver before yours' to correctly animate searchBar
        //but for such cases as CupertinoSliverRefreshControl, it is safe to insert them at the beginning and to do that
        //wrap your sliver with Prior widget
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) {
              return CupertinoListTile(title: Text("Title with index of $index"));
            },
            childCount: 15,
          ),
        ),
      ],
    );
  }
}

Categories

Source repository

Projects using this package

No data available yet.