durbek03/ios_search_appbar

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