Unduh timeline_list - Unduh Kode Sumber timeline

timeline_list

Data situs web

1.0.0

Unduh

Widget Timeline Flutter

Widget flutter yang sangat dapat disesuaikan untuk menampilkan jadwal vertikal dengan penanda kustom, ikon, dan opsi penentuan posisi yang fleksibel.

Screenshot Daftar Timeline Flutter

Peringatan

? Dokumentasi dibuat menggunakan LLMS. Jika Anda melihat kesalahan atau kesalahan ketik, silakan kirimkan permintaan tarik atau buat masalah.

Fitur

Tiga posisi garis waktu: start (kiri), center , atau end (kanan)
? Penanda yang sepenuhnya dapat disesuaikan dengan widget apa pun sebagai konten atau ikon
? Alignment Ikon Flexible: top , center , atau bottom spidol
Posisi penanda individu untuk jadwal yang terpusat
Dukungan untuk Urutan Timeline Terbalik
Fisika Gulir Kustom dan Dukungan Pengontrol

Instalasi

Tambahkan ini ke file pubspec.yaml paket Anda:

 dependencies :
  timeline_list : ^0.1.0

Penggunaan

Timeline sederhana

Screenshot Daftar Garis Waktu Sederhana

 import 'package:timeline_list/timeline_list.dart' ;

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

Contoh onboarding

Berikut adalah contoh yang lebih maju yang menunjukkan garis waktu onboarding dengan ikon khusus:

Screenshot daftar timeline onboarding 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,
        ),
      ),
    ]));

Kustomisasi

Properti Timeline

timelinePosition : Mengontrol posisi timeline keseluruhan ( start , center , end )
iconAlignment : menetapkan ikon perataan relatif terhadap konten penanda
iconSize : Menentukan ukuran ikon penanda
lineWidth : Mengatur lebar garis penghubung
lineColor : Menyesuaikan warna garis penghubung
itemGap : Mengontrol jarak antar penanda
iconGap : Mengatur kesenjangan antara ikon dan konten penanda