expandable_search_bar

패키지 개요

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

Flutter용 시각적으로 매력적이고 애니메이션 효과가 있는 검색창으로, 부드러운 전환과 높은 사용자 정의 가능성을 제공합니다. 동적 확장과 직관적인 디자인을 통해 사용자 경험을 향상시키며, 매력적인 검색 인터페이스를 필요로 하는 앱에 적합합니다. 이 패키지는 여러 플랫폼을 지원하며 개발자가 앱 테마에 맞게 외관과 행동을 맞춤 설정할 수 있도록 합니다.

사용 사례

모바일 앱 검색 인터페이스 개선
인터랙티브 웹 검색 경험 만들기
데스크톱 애플리케이션에 애니메이티드 검색 통합하기
전자상거래 앱의 UX 향상
대시보드에 반응형 검색 바 추가하기

주요 기능

부드러운 확장 가능한 애니메이션
매우 사용자 정의 가능한 외관
크로스 플랫폼 호환성
다크 모드를 지원합니다
기존 UI와의 간편한 통합
사용자 정의 가능한 검색 트리거

적합한 대상

검색 중심 앱을 구축하는 플러터 개발자
디자인 중심의 UI/UX 팀
다중 플랫폼을 대상으로 하는 앱
애니메이션 컴포넌트를 찾는 개발자
현대적인 검색 바 미적 요소를 필요로 하는 프로젝트

고려 사항

저사양 기기에서는 성능 조정이 필요할 수 있습니다
사용자 정의 스타일은 개발 시간을 늘릴 수 있습니다
제한된 내장 검색 로직(외부 구현 필요)
Flutter의 애니메이션 프레임워크에 의존합니다
추가 처리 없이 매우 큰 데이터 세트에 최적화되지 않음

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

Pub

Animated Search Bar

Animated Search Bar package lets you add a beautiful search bar to your Flutter app.

Installation

Add the latest version of package to your pubspec.yaml (and rundart pub get):

dependencies:
  expandable_search_bar: ^latest_version

Import the package and use it in your Flutter App.

import 'package:expandable_search_bar/expandable_search_bar.dart';

Screenshots

⚠Note: As you see in the screenshots this package is only available on Mouse devices (Web, Windows, macOS, Linux), but I'm working on a solution to add mobile devices too.

Example

There are a number of properties that you can modify. Customize them as you want:

width
text
gutter (space between TextField and Button)
background color
icon color
icon background color
shadow under the bar
shadow under the button
animation duration (also for TextField)
animation curve (also for TextField)

class AnimatedBar extends StatelessWidget {  
  const AnimatedBar({
    Key? key,
  }) : super(key: key);

  final TextEditingController? searchController 
  = TextEditingController();

  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      body: Center(  
        child: const AnimatedSearchBar(  
          ExpandableSearchBar(
            onTap: () {
              print(
                searchController!.text.toString(),
              );
            },
            hintText: "search something",
            editTextController: searchController,
          ),
        ),  
      ),  
    );  
  }  
}

Next Goals

[ ] Support mobile devices (Unfortunately it's only available for "Mouse" devices).
[ ] Change font style and color for text.

Support

You can support me by following me on and GitHub

And also don't forget to star this package on GitHub

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

패키지 설치