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 分類

安裝套件