sliverbar_with_card

패키지 개요

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

슬라이버 앱바를 생성하는 것을 단순화하는 플러터 패키지로, 내장된 액션 및 뒤로 버튼이 있는 카드를 포함하여 스크롤 가능한 목록에서 카탈로그 항목을 표시하는 데 이상적입니다. 가시적으로 구분되는 카드 컨테이너와 함께 접히는 앱바를 결합함으로써 사용자 경험을 향상시키며, 제품이나 항목 목록에 적합합니다. 이 패키지는 가볍고 기존의 스크롤 가능한 UI에 원활하게 통합될 수 있도록 설계되었습니다.

사용 사례

제품 카탈로그 표시
아이템 세부 정보 화면 만들기
스크롤 가능한 목록 인터페이스 구축
목록 내 탐색 향상
반응형 카드 기반 레이아웃 설계
작업이 있는 접을 수 있는 헤더 구현

주요 기능

통합 카드가 있는 SliverAppBar
내장된 뒤로 및 작업 버튼
스크롤 가능한 콘텐츠에 최적화됨
최소한의 설정 필요
깔끔하고 현대적인 디자인
사용자 정의 가능한 카드 외관

적합한 대상

전자상거래 앱을 개발하는 개발자
스크롤 가능한 인터페이스에 집중하는 UI 디자이너
접을 수 있는 앱 바가 필요한 프로젝트
카탈로그 스타일의 데이터 표시를 가진 앱
재사용 가능한 헤더 컴포넌트를 원하는 팀

고려 사항

수직 스크롤 레이아웃에 제한됨
CustomScrollView와의 통합이 필요합니다
복잡한 디자인을 위해 추가 스타일링이 필요할 수 있습니다
스크롤할 수 없는 컨텍스트에 적합하지 않습니다
Flutter의 Sliver 시스템에 의존합니다
목록 보기와 함께 사용할 때 가장 효과적입니다

원본 README

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

Card Sliver App Bar

A Flutter package to create a SliverAppBar with a Card.

Inspired by FaoB's Twitter Post design.

Getting started

Wrap your content with CardSliverAppBar and set your desired options:

Basic

MaterialApp(
  home: Material(
    child: CardSliverAppBar(
        height: 300,
        background: Image.asset("assets/logo.png"),
        title: Text("The Walking Dead"),
        body: Container()
    )
  )
)

With options

MaterialApp(
  home: Material(
    child: CardSliverAppBar(
        height: 300,
        background: Image.asset("assets/logo.png", fit: BoxFit.cover),
        title: Text("The Walking Dead",
            style: TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
        ),
        titleDescription: Text("Drama, Action, Adventure, Fantasy, \nScience Fiction, Horror, Thriller",
            style: TextStyle(color: Colors.black, fontSize: 11)
        ),
        card: AssetImage("assets/card.jpg"),
        backButton: true,
        backBottonColors: [Colors.white, Colors.black],
        action: IconButton(
          icon: Icon(Icons.favorite),
          iconSize: 30.0,
          color: Colors.red,
          onPressed: (){},
        ),
        body: Container()
    )
  )
)

Options

Property	Type	Description	Default
`required` height	Double	The height of background image	-
`required` background	Image	The image of background	-
`required` title	Text	The text of title	-
`required` body	Widget	The body of this widget	-
titleDescription	Text	The short description of title	`null`
backButton	Boolean	If has backButton	`false`
backButtonColors	List	The colors of backButton when open and closed	`Colors.white`
action	Widget	The action between appBar and background	`null`
card	ImageProvider	The image of card	`null`

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

패키지 설치