ios_search_appbar

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包，实现 iOS 风格的可折叠应用栏，配有平滑动画的搜索栏。旨在模仿原生 iOS 体验，提供简洁、响应迅速的界面，搜索栏可通过直观手势展开和收起。动画流畅且可自定义，增强搜索密集型应用的用户参与度。支持 Android、iOS、Web、macOS、Windows 和 Linux 多个平台，适用于跨平台开发。

适合场景

实现类似 iOS 的搜索界面
创建具有搜索功能的动态应用栏
增强内容密集型应用的用户体验
跨平台构建响应式搜索UI
设计现代的动画导航栏

主要特点

iOS 风格的可折叠应用栏
平滑的动画搜索栏
手势驱动的展开和折叠
跨平台兼容性
可自定义的动画和样式
对多个目标平台的支持

适合对象

面向iOS设计美学的开发者
需要高级搜索界面的应用程序
需要一致搜索体验的跨平台项目
注重设计的 Flutter 应用程序
注重流畅动画和用户体验的团队

使用建议

可能需要为非iOS主题添加额外的样式
使用复杂嵌套控件时的性能影响
超出核心动画的自定义功能有限
最适合单次搜索场景
需要与现有的应用栏布局进行仔细集成

原始 README

以下为关联源码仓库的 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.

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

搜索插件、代码仓与 APP 分类

安装插件