timeline_list Download - timeline_list Quellcode herunterladen

timeline_list

Website-Daten

1.0.0

Herunterladen

Flattern Timeline Widget

Ein hoch anpassbares Flutter -Widget zum Anzeigen vertikaler Zeitpläne mit benutzerdefinierten Markierungen, Symbole und flexiblen Positionierungsoptionen.

Flutter Timeline List Screenshot

Warnung

? Die Dokumentation wurde mit LLMs erstellt. Wenn Sie Fehler oder Tippfehler bemerken, senden Sie bitte eine Pull -Anfrage oder erstellen Sie ein Problem.

Merkmale

Drei Zeitlinienpositionen: start (links), center oder end (rechts)
? Vollständig anpassbare Marker mit jedem Widget als Inhalt oder Symbol
? Flexible Symbolausrichtung: top , center oder bottom der Marker
Einzelmarker -Positionierung für zentrierte Zeitpläne
Unterstützung für umgekehrte Zeitleistenreihenfolge
Benutzerdefinierte Bildschirmphysik und Controller -Unterstützung

Installation

Fügen Sie dies in die pubspec.yaml -Datei Ihres Pakets hinzu:

 dependencies :
  timeline_list : ^0.1.0

Verwendung

Einfache Zeitleiste

Flattern Simple Timeline List Screenshot

 import 'package:timeline_list/timeline_list.dart' ;

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

Einbord -Beispiel

Hier ist ein fortgeschritteneres Beispiel, das eine Onboarding -Zeitleiste mit benutzerdefinierten Symbolen zeigt:

Flattern Onboarding Timeline List 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,
        ),
      ),
    ]));

Anpassung

Timeline -Eigenschaften

timelinePosition : Steuert die Gesamtposition der Timeline ( start , center , end )
iconAlignment : Legt die Symbolausrichtung in Bezug auf Markerinhalte fest
iconSize : Definiert die Größe der Marker -Symbole
lineWidth : Legt die Breite der Verbindungsleitungen fest
lineColor : Passen Sie die Farbe von Verbindungsleitungen an
itemGap : Steuert den Abstand zwischen Markern
iconGap : Legt die Lücke zwischen Icon- und Marker -Inhalt fest