ios_search_appbar

Description:

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.

Usage #
Add the ios_search_appbar package to your pubspec.yaml file:
dependencies:
ios_search_appbar: ^1.1.1

copied to clipboard
Import the package in your Dart code:
import 'package:ios_search_appbar/cupertino_search_appbar.dart';
copied to clipboard
Use CupertinoSearchAppBar by passing your content to the slivers parameter:
CupertinoSearchAppBar(
slivers: [
// Your slivers go here
],
)
copied to clipboard
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,
),
),
],
);
}
}
copied to clipboard