Descargar timeline_list - Descargar el código fuente de timeline

timeline_list

Datos del sitio web

1.0.0

Descargar

Widget de línea de tiempo Flutter

Un widget de flutador altamente personalizable para mostrar plazos verticales con marcadores personalizados, iconos y opciones de posicionamiento flexible.

Captura de pantalla de Lista de línea de tiempo Flutter

Advertencia

? La documentación se creó usando LLM. Si nota algún error o error tipográfico, envíe una solicitud de extracción o cree un problema.

Características

Tres posiciones de línea de tiempo: start (izquierda), center o end (derecha)
? Marcadores totalmente personalizables con cualquier widget como contenido o icono
? Alineación de iconos flexibles: top , center o bottom de los marcadores
Posicionamiento del marcador individual para líneas de tiempo centradas
Soporte para el orden de la línea de tiempo invertido
Soporte de física y controlador de desplazamiento personalizado

Instalación

Agregue esto al archivo pubspec.yaml de su paquete:

 dependencies :
  timeline_list : ^0.1.0

Uso

Línea de tiempo simple

Flutter Simple Timeline List captura de pantalla

 import 'package:timeline_list/timeline_list.dart' ;

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

Ejemplo de incorporación

Aquí hay un ejemplo más avanzado que muestra una línea de tiempo de incorporación con iconos personalizados:

Flutter de la lista de tiempo de incorporación Captura de pantalla

 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,
        ),
      ),
    ]));

Personalización

Propiedades de la línea de tiempo

timelinePosition : controla la posición general de la línea de tiempo ( start , center , end )
iconAlignment : establece la alineación de iconos en relación con el contenido del marcador
iconSize : define el tamaño de los iconos de marcador
lineWidth : establece el ancho de las líneas de conexión
lineColor : personaliza el color de las líneas de conexión
itemGap : controla el espacio entre marcadores
iconGap : establece la brecha entre el icono y el contenido del marcador

Propiedades marcadoras

child : el widget de contenido principal del marcador
icon : widget de icono personalizado opcional
position : Posición del marcador para líneas de tiempo centradas ( left , right )
onTap : devolución de llamada opcional para eventos de toque de marcador
maxWidth : restricción de ancho máximo para el contenido del marcador