sliverbar_with_card

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

一個 Flutter 套件，可簡化建立具有內嵌動作與返回按鈕的 SliverAppBar，非常適合在可捲動清單中顯示目錄項目。它透過結合可收合的標題列與視覺上獨特的卡片容器，提升使用者體驗，特別適用於產品或項目清單。此套件輕量級，專為無縫整合至現有的可捲動 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`

搜尋套件、儲存庫與 APP 分類

安裝套件