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 分类

安装插件