timeline_list Download - timeline_list download de código fonte

timeline_list

Dados do site

1.0.0

Baixar

Widget da linha do tempo da vibração

Um widget de vibração altamente personalizável para exibir prazos verticais com marcadores, ícones e opções de posicionamento flexíveis.

Captura de tela da Lista da linha do tempo do fleto

Aviso

? A documentação foi criada usando LLMS. Se você notar algum erro ou digitação, envie uma solicitação de tração ou crie um problema.

Características

Três posições da linha do tempo: start (esquerda), center ou end (direita)
? Marcadores totalmente personalizáveis com qualquer widget como conteúdo ou ícone
? Alinhamento flexível do ícone: top , center ou bottom dos marcadores
Posicionamento de marcadores individuais para cronogramas centralizados
Suporte para ordem da linha do tempo reversa
Suporte de física e controlador de rolagem personalizada

Instalação

Adicione isso ao arquivo pubspec.yaml do seu pacote:

 dependencies :
  timeline_list : ^0.1.0

Uso

Linha do tempo simples

Screenshot da lista de cronogramas simples de vibração

 import 'package:timeline_list/timeline_list.dart' ;

Timeline (
  children : [
    Marker (child : Text ( "Step 1" )),
    Marker (child : Text ( "Step 2" )),
    Marker (child : Text ( "Step 3" ))
  ],
)

Exemplo de integração

Aqui está um exemplo mais avançado, mostrando uma linha do tempo de integração com ícones personalizados:

ScreenShot

 var checkIcon = Container (
    width : 16 ,
    height : 16 ,
    decoration : BoxDecoration (shape : BoxShape .circle, color : Colors .green),
    child : Icon ( Icons .check, color : Colors .white, size : 12 ));
var emptyIcon = Container (
    width : 16 ,
    height : 16 ,
    decoration : BoxDecoration (shape : BoxShape .circle, color : Colors .grey));
return Scaffold (
    appBar : AppBar (title : const Text ( "Onboarding example" )),
    body : Column (children : [
      Timeline . builder (
        context : context,
        markerCount : 10 ,
        properties : TimelineProperties (
            iconAlignment : MarkerIconAlignment .center,
            iconSize : 16 ,
            timelinePosition : TimelinePosition .start),
        markerBuilder : (context, index) => Marker (
          child : Padding (
            padding : const EdgeInsets . all ( 8.0 ),
            child : Text ( "Step ${ index + 1 }" ),
          ),
          icon : index >= 8 ? emptyIcon : checkIcon,
          position : MarkerPosition .left,
        ),
      ),
    ]));

Personalização

Propriedades da linha do tempo

timelinePosition : controla a posição geral da linha do tempo ( start , center , end )
iconAlignment : define o alinhamento do ícone em relação ao conteúdo do marcador
iconSize : define o tamanho dos ícones do marcador
lineWidth : define a largura das linhas de conexão
lineColor : personaliza a cor das linhas de conexão
itemGap : controla o espaçamento entre os marcadores
iconGap : define lacuna entre o ícone e o conteúdo do marcador

Propriedades do marcador

child : o principal widget de conteúdo do marcador
icon : widget opcional de ícone personalizado
position : Posição do marcador para cronogramas centralizados ( left , right )
onTap : retorno de chamada opcional para eventos de tap marcador
maxWidth : restrição de largura máxima para o conteúdo do marcador