timeline_list Téléchargement - timeline_list Source Téléchargement

timeline_list

Données du site Web

1.0.0

Télécharger

Widget de chronologie de flottement

Un widget de flottement hautement personnalisable pour afficher des délais verticaux avec des marqueurs personnalisés, des icônes et des options de positionnement flexibles.

Capture d'écran de la liste de chronologie Flutter

Avertissement

? La documentation a été créée à l'aide de LLMS. Si vous remarquez des erreurs ou des fautes de frappe, veuillez soumettre une demande de traction ou créer un problème.

Caractéristiques

Trois positions de chronologie: start (à gauche), center ou end (à droite)
? Marqueurs entièrement personnalisables avec n'importe quel widget comme contenu ou icône
? Alignement d'icônes flexible: top , center ou bottom des marqueurs
Positionnement de marqueur individuel pour les délais centrés
Prise en charge de la commande de chronologie inversée
Physique de défilement personnalisé et support de contrôleur

Installation

Ajoutez ceci au fichier pubspec.yaml de votre package:

 dependencies :
  timeline_list : ^0.1.0

Usage

Chronologie simple

Capture d'écran de la liste de chronologie Simple Flutter

 import 'package:timeline_list/timeline_list.dart' ;

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

Exemple d'intégration

Voici un exemple plus avancé montrant une chronologie d'intégration avec des icônes personnalisées:

Capture d'écran de la liste de chronologie de l'intégration de Flutter

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

Personnalisation

Propriétés de la chronologie

timelinePosition : contrôle la position globale de la chronologie ( start , center , end )
iconAlignment : définit l'alignement de l'icône par rapport au contenu marqueur
iconSize : définit la taille des icônes de marqueur
lineWidth : définit la largeur des lignes de connexion
lineColor : personnalise la couleur des lignes de connexion
itemGap : contrôle l'espacement entre les marqueurs
iconGap : fixe l'écart entre l'icône et le contenu du marqueur