https://github.com/durbek03/ios_search_appbar

Flutter package which combines collapsible app bar and beatifully animated search bar in ios-style.
https://github.com/durbek03/ios_search_appbar

animation appbar collapsible collapsibleappbar collapsiblesearchappbar flutter searchbar

Last synced: about 1 month ago
JSON representation

Flutter package which combines collapsible app bar and beatifully animated search bar in ios-style.

• Host: GitHub
• URL: https://github.com/durbek03/ios_search_appbar
• Owner: durbek03
• License: bsd-2-clause
• Created: 2023-06-20T06:53:36.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-11-28T13:16:24.000Z (12 months ago)
• Last Synced: 2023-11-29T13:37:42.191Z (12 months ago)
• Topics: animation, appbar, collapsible, collapsibleappbar, collapsiblesearchappbar, flutter, searchbar
• Language: Dart
• Homepage:
• Size: 39.4 MB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://github.com/durbek03/ios_search_appbar/assets/76834170/1f671641-2e63-4297-b1f2-a1a8aa32abe6)

## Usage

Add the `ios_search_appbar` package to your `pubspec.yaml` file:

```yaml

dependencies:

  ios_search_appbar: ^1.1.1

```

Import the package in your Dart code:

```dart

import 'package:ios_search_appbar/cupertino_search_appbar.dart';

```

Use `CupertinoSearchAppBar` by passing your content to the `slivers` parameter:

```dart

CupertinoSearchAppBar(

  slivers: [

    // Your slivers go here

  ],

)

```

Example:

```dart

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,

          ),

        ),

      ],

    );

  }

}