패키지, 저장소 및 앱 카테고리 검색

패키지 상세v1.1.6

ios_search_appbar

아름답게 애니메이션되는 검색창을 갖춘 iOS 스타일의 접기 가능한 앱 바

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
30
좋아요
35
Pub 점수
125

패키지 설치

flutter pub add ios_search_appbar

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

iOS 스타일의 접을 수 있는 앱 바를 구현하고 부드러운 애니메이션을 가진 검색창을 제공하는 플러터 패키지입니다. 원본 iOS 경험을 모방하도록 설계되어 직관적인 제스처로 검색창이 확장되고 축소되는 세련되고 반응성이 뛰어난 인터페이스를 제공합니다. 애니메이션은 유연하며 사용자 참여도를 높이는 검색 중심 애플리케이션에 적합합니다. Android, iOS, 웹, macOS, Windows, Linux 등 다양한 플랫폼을 지원하여 크로스플랫폼 개발에 유용합니다.

사용 사례

  • iOS 스타일의 검색 인터페이스 구현
  • 검색 기능이 있는 동적 앱 바 만들기
  • 콘텐츠 중심 앱에서 사용자 경험 향상
  • 다양한 플랫폼에서 반응형 검색 UI 구축하기
  • 현대적인 애니메이션 네비게이션 바 디자인

주요 기능

  • iOS 스타일의 접을 수 있는 앱 바
  • 부드러운 애니메이션 검색 바
  • 제스처 기반 전개 및 접기
  • 크로스 플랫폼 호환성
  • 사용자 정의 가능한 애니메이션 및 스타일
  • 다중 대상 플랫폼 지원

적합한 대상

  • iOS 디자인 미학을 목표로 하는 개발자
  • 고급 검색 UI가 필요한 앱
  • 일관된 검색 경험을 필요로 하는 크로스 플랫폼 프로젝트
  • 디자인 중심의 플러터 애플리케이션
  • 부드러운 애니메이션과 사용자 경험을 우선시하는 팀

고려 사항

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

카테고리

소스 저장소

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.