パッケージ、リポジトリ、アプリカテゴリを検索

パッケージ詳細v1.1.6

ios_search_appbar

iOS風の折りたたみ可能なアプリバーと美しくアニメーションされた検索バー

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
30
いいね数
35
Pub ポイント
125

パッケージをインストール

flutter pub add ios_search_appbar

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

iOS風の折りたたみ可能なアプリバーを実装し、滑らかなアニメーション付きの検索バーを備えたFlutterパッケージです。ネイティブiOS体験を模倣することを目的としており、直感的なジェスチャーで検索バーが拡張および収縮する、洗練された応答性のあるインターフェースを提供します。アニメーションは滑らかでカスタマイズ可能であり、検索中心のアプリケーションにおけるユーザー参加度を高めます。Android、iOS、Web、macOS、Windows、Linuxなど複数のプラットフォームをサポートしており、クロスプラットフォーム開発に適しています。

用途

  • iOS風の検索インターフェースを実装する
  • 検索機能付きの動的アプリバーを作成する
  • コンテンツが豊富なアプリにおけるユーザーエクスペリエンスの向上
  • 複数のプラットフォームにわたって応答性のある検索UIを構築する
  • モダンでアニメーション付きのナビゲーションバーの設計

主な機能

  • iOSスタイルの折りたたみ可能なアプリバー
  • スムーズなアニメーション検索バー
  • ジェスチャー駆動の展開と折りたたみ
  • クロスプラットフォーム互換性
  • カスタマイズ可能なアニメーションとスタイル
  • 複数のターゲットプラットフォームのサポート

適している対象

  • iOSデザインの美的基準をターゲットにする開発者
  • 高度な検索UIを必要とするアプリ
  • 一貫した検索体験を必要とするクロスプラットフォームプロジェクト
  • デザインに焦点を当てたFlutterアプリケーション
  • スムーズなアニメーションとUXを重視するチーム

注意事項

  • 非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.

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

カテゴリー

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。