horizontal_card_pager

Visão geral do pacote

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

Um pacote Flutter para criar paginadores horizontais dinâmicos e visualmente atraentes. Permite transições suaves e interativas entre cartões em layout horizontal, ideal para exibir conteúdo como imagens, cartões ou listagens de produtos. O paginador oferece animações personalizáveis e design responsivo em múltiplas plataformas. Perfeito para aplicativos que precisam de interfaces de cartões deslizantes envolventes com estética moderna.

Casos de uso

Carrosséis de produtos deslizáveis
Galerias de imagens
Conteúdo interativo deslizante
Telas de onboarding
Seções de destaque de recursos
Perfil do usuário destaca

Principais recursos

Navegação de cartão horizontal
Transições de animação suaves
Estilo de cartão personalizável
Suporte a design responsivo
Compatibilidade multiplataforma
Carregamento dinâmico de conteúdo

Indicado para

desenvolvedores de aplicativos móveis
designers de UI/UX
Aplicações de comércio eletrônico
Aplicativos ricos em conteúdo
Protótipos interativos

Considerações

Requer ajuste cuidadoso de desempenho para grandes conjuntos de dados
Pode ser necessário lógica adicional para rolagem infinita
indicadores de paginação embutidos limitados
Mais adequado para contagens moderadas de cartas
Não otimizado para layouts verticais
Depende de dependências externas para funcionalidades avançadas

README original

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

Use dynamic and beautiful card view pagers (horizontal direction) to help you create great apps.

Preview

Mobile

Vertical Card Pager

Web

Web Link

Installing

Add dependency to pubspec.yaml

Get the latest version in the 'Installing' tab on pub.dartlang.org

dependencies:
    horizontal_card_pager: ^1.1.1

Import the package

import 'package:horizontal_card_pager/horizontal_card_pager.dart';
import 'package:horizontal_card_pager/card_item.dart';

Adding HorizontalCardPager

With optional parameters

HorizontalCardPager(
    initialPage : 2 // default value is 2
    onPageChanged: (page) => print("page : $page"),
    onSelectedItem: (page) => print("selected : $page"),
    items: { ... },  // set ImageCardItem or IconTitleCardItem class
))

Put CardItem object in items parameter in HorizontalCardPager

If the contents of the card contain only images, use the ImageCardItem class. and If the contents of the card include an icon and a title, use the IconTitleCardItem class.

Image	Icon & Text

`ImageCardItem`


class ImageCarditem extends CardItem {
  final Widget image;

  ImageCarditem({this.image});
}

`IconTitleCardItem`

class IconTitleCardItem extends CardItem {
  final IconData iconData;
  final String text;
  final Color selectedBgColor;
  final Color noSelectedBgColor;
  final Color selectedIconTextColor;
  final Color noSelectedIconTextColor;

  IconTitleCardItem(
      {this.iconData,
      this.text,
      this.selectedIconTextColor = Colors.white,
      this.noSelectedIconTextColor = Colors.grey,
      this.selectedBgColor = Colors.blue,
      this.noSelectedBgColor = Colors.white});
}

How to use

Check out the example app in the example directory or the 'Example' tab on pub.dartlang.org for a more complete example.

Reference

This package's animation is inspired from from this Dribbble art.

TODO

[x] Attach Gesture Detector
[x] implement call back method
[x] Enable to customize card design
- [x] icon & title
- [x] image only
[x] Implements sample app
[x] Publish plugin

Buscar categorias, pacotes e repositórios

Instalar pacote