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

ducafecatFlutter 생태계 탐색
패키지 상세v1.0.1

coordinator_layout

라이브러리는 접히는 헤더 동작을 처리하기 위한 위젯/레이아웃을 포함합니다

AndroidiOSWebmacOSWindowsLinux
pub.dev API 문서 소스 코드
30일 다운로드
73
좋아요
4
Pub 점수
150

패키지 설치

flutter pub add coordinator_layout

패키지 개요

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

coordinator_layout 패키지는 Flutter 애플리케이션에서 헤더를 접는 동작을 관리하기 위해 설계된 위젯과 레이아웃의 세트를 제공합니다. 안드로이드의 CoordinatorLayout을 영감으로 하여 헤더와 하위 콘텐츠 간에 부드럽고 조율된 스크롤 상호작용을 가능하게 합니다. 사용자가 스크롤할 때 헤더가 접히거나 콘텐츠가 표시되는 동적이고 반응형 UI를 만들기에 이상적입니다. 모바일, 웹, 데스크톱 등 여러 플랫폼을 지원하여 크로스플랫폼 개발에 매우 유연합니다. 기존의 Flutter 위젯과 원활하게 통합되어 네이티브처럼 느껴지는 스크롤 경험을 제공합니다.

사용 사례

  • 접을 수 있는 앱 바 구현
  • 동적 스크롤 가능한 인터페이스 만들기
  • 반응형 헤더 레이아웃 만들기
  • 부드러운 스크롤을 통한 사용자 경험 향상
  • 복잡한 스크롤 동작 설계

주요 기능

  • 접히는 헤더 애니메이션
  • 크로스 플랫폼 호환성
  • ScrollController와의 통합
  • 중첩 스크롤 지원
  • 사용자 정의 가능한 레이아웃 동작

적합한 대상

  • Material Design 앱을 개발하는 개발자
  • 고급 스크롤 효과를 원하는 UI 디자이너
  • 동적 헤더 상호작용을 필요로 하는 앱
  • 크로스 플랫폼 Flutter 프로젝트
  • 복잡한 스크롤 UI 패턴

고려 사항

  • 스크롤 컨트롤러에 대한 이해가 필요합니다
  • 간단한 레이아웃에 복잡성을 증가시킬 수 있습니다
  • 고급 UI 설계에 가장 적합
  • 성능은 위젯 중첩에 따라 달라집니다
  • 핵심 Flutter 위젯에 비해 문서가 제한적입니다

원본 README

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

coordinator_layout

pub package

a Library contains widget/layout to handle collapsing header behavior

Alt Text

Example

CoordinatorLayout(
    headerMaxHeight: 200,
    headerMinHeight: kToolbarHeight + MediaQuery.of(context).padding.top,
    headers: [
        SliverCollapsingHeader(
            builder: (context, offset, diff) {
                return ...;
            },
        ),
    ],
    body: Container(height: null, child: buildBody(context)),
),
Fit content
CoordinatorLayout(
    headerMaxHeight: 200,
    headerMinHeight: kToolbarHeight + MediaQuery.of(context).padding.top,
    header:[ 
        Builder(builder: (context) {
            return SliverOverlapAbsorber(
            handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
            sliver: SliverSafeArea(
                top: false,
                sliver: SliverCollapsingHeader(
                builder: (context, offset, diff) {
                    return ...;
                },
                ),
            ),
            );
        }),
    ],
    body: Container(height: null, child: buildBody(context)),
),

카테고리

헤더

소스 저장소

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

아직 데이터가 없습니다.