sliverbar_with_card

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

Um pacote Flutter que simplifica a criação de um SliverAppBar com um Card contendo botões de ação e voltar embutidos, ideal para exibir itens de catálogo em uma lista rolável. Ele melhora a experiência do usuário ao combinar uma barra de aplicativo colapsável com um container de cartão visualmente distinto, perfeito para listas de produtos ou itens. O pacote é leve e projetado para integração perfeita em interfaces de rolagem existentes.

Casos de uso

Exibindo catálogos de produtos
Criando telas de detalhes do item
Construindo interfaces de lista rolável
Melhorando a navegação em listas
Projetando layouts responsivos baseados em cartões
Implementando cabeçalhos colapsáveis com ações

Principais recursos

SliverAppBar com cartão integrado
Botões embutidos de retorno e ação
Otimizado para conteúdo rolável
Configuração mínima necessária
Design limpo e moderno
Aparência personalizável do cartão

Indicado para

Desenvolvedores construindo aplicativos de comércio eletrônico
Designers de interface focados em interfaces rolagens
Projetos que exigem barras de aplicativos colapsáveis
Aplicativos com apresentação de dados em estilo catálogo
Equipes que desejam componentes de cabeçalho reutilizáveis

Considerações

Limitado a layouts de rolagem vertical
Requer integração com CustomScrollView
Pode ser necessário estilização adicional para designs complexos
Não adequado para contextos não roláveis
Depende do sistema Sliver do Flutter
Melhor usado em conjunto com visualizações de lista

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

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`

Buscar pacotes, repositórios e categorias de apps

Instalar pacote