Buscar pacotes, repositórios e categorias de apps

Capa de flip_carousel
Detalhes do pacotev0.0.3

flip_carousel

Carrossel infinito com animação de giro 3D. Ambos widgets e imagens podem ser atribuídos ao widget como entradas. A perspectiva e o espaço entre os cartões podem ser modificados.

AndroidiOSWebmacOSWindowsLinux
Downloads em 30 dias
39
Curtidas
47
Pontos Pub
160

Instalar pacote

flutter pub add flip_carousel

Visão geral do pacote

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

Flip Carousel é um pacote Flutter que oferece uma carrossel infinito com animação 3D de virada para exibir widgets ou imagens. Ele suporta perspectiva e espaçamento personalizáveis entre os cartões, permitindo apresentações imersivas e interativas de conteúdo em múltiplas plataformas. O carrossel pode ser facilmente integrado a aplicativos para mostrar conteúdo dinâmico com transições suaves de virada. Ideal para galerias, exibições de produtos ou qualquer interface que exija navegação envolvente baseada em cartões.

Casos de uso

  • Galerias de imagens interativas
  • Interfaces de apresentação de produtos
  • Controles deslizantes de conteúdo dinâmico
  • telas de introdução do aplicativo móvel
  • Experiências de flipbook digital

Principais recursos

  • Rolagem infinita com animação de giro 3D
  • Perspectiva e espaçamento de cartões personalizáveis
  • Suporta tanto widgets quanto imagens como itens
  • Compatibilidade multiplataforma
  • Interações de toque suaves e responsivas

Indicado para

  • Desenvolvedores construindo interfaces de usuário interativas
  • Designers procurando carrosséis visualmente ricos
  • Aplicativos que exigem apresentação de conteúdo envolvente
  • Projetos direcionados para Android, iOS, Web, macOS, Windows e Linux

Considerações

  • Pode afetar o desempenho com grandes conjuntos de dados
  • Requer ajuste cuidadoso da perspectiva para melhores visuais
  • Personalização limitada além da estilização básica
  • Mais adequado para contagens moderadas de cartas para manter a fluidez

README original

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

A simple infinite horizontal carousel with flip animation which can be used for both image and widgets

📱 Usage

Import package in your file

import 'package:flip_carousel/flip_carousel.dart';

Use FlipCarousel widget

FlipCarousel(items:cardItems);

Give a list of data and set the properties as you wish


List<dynamic> cardItems = [
    'https://i.ibb.co/QYdQHBw/batman2.jpg',
    'https://i.ibb.co/vwhykYp/spider1.jpg',
    'https://i.ibb.co/H4VrQS4/spider2.jpg',
    Container(color: Colors.amber, child: const FlutterLogo()),
  ];



FlipCarousel(
        items: cardItems,
          transitionDuration: const Duration(milliseconds: 400),
          isAssetImage: false,
          border: Border.all(width: 5, color: const Color(0xFFFFFFFF)),
          width: 250,
          height: 400,
          fit: BoxFit.cover,
          perspectiveFactor: 0.002,
          layersGap: 30,
          
          onChange: (int pageIndex) {
            print(pageIndex);
          },
          onTap: () {
            print("tap");
          },
        ),

Customization

  • You can add both widgets and ImageUrls as input.
  • make sure that you have set the the [ isAssetImage ] value base on your source.

Here is the rest of properties that can be modyfied


  /// List of image/widgets to be shown in the carousel; Accepts two types of link.
  /// For example: `https://...jpg` for online images and `assets/...` for local images.
  final List<dynamic> items;

  /// Specifies the type of image addresses in [imagesLink].
  /// Must be `false` if [imagesLink] contains online images.
  /// Must be `true` if [imagesLink] contains local images.
  final bool assetImage;

  /// Set as the image slider [width].
  /// Defaults to 300.
  final double width;

  /// Set as the image slider [height].
  /// Defaults to 450.
  final double height;

  /// Returns the page index after animation is done .
  final Function(int pageIndex)? onChange;

  /// Runs the given code onPress .
  final Function()? onTap;

  /// Set as the main frames [backgroundColor].
  final Color? backgroundColor;

  /// Determines the value of the [fit] property of the images
  /// Defaults to BoxFit.cover.
  final BoxFit fit;

  /// Determines the space between two [H3DCard].
  /// Defaults to 30.
  final double layersGap;

  /// Determines the perspective transformation of the [H3DCard] when being animated.
  /// Defaults to 0.0015.
  final double perspectiveFactor;

  /// Determines the space between two [H3DCard].
  /// Defaults to 30.

  final BoxBorder? border;

  /// Determines the [borderRadius] of the [H3DCard].
  /// Defaults to 30.

  final BorderRadius borderRadius;

  /// Determines the clip behaviour of the child widget.
  /// Defaults to [Clip.hardEdge].

  final Clip childClip;

  /// Determines [Duration] of transition animation.
  /// Defaults to 500 milliseconds.
  final Duration transitionDuration;

  /// Determines [Visibility] of the transition arrows.
  /// Defaults to True.

  final bool arrowControllersVisibility;

  /// Determines [Color] of the transition arrows.
  /// Defaults to [Colors.white].
  final Color arrowControllersColor;

  /// Determines [tag] of the selected  [H3DCard].
  final String heroTag;

```#

Categorias

Repositório-fonte

Projetos que usam este pacote

Ainda não há dados.