order_tracker

Tamamlanan, mevcut ve beklemede durumlarını içeren bir adım zaman çizelgesi.

Bir sürecin hangi aşamaya geldiği. order_tracker, her biri bir duruma sahip iki ila on iki adlandırılmış adım çizer; böylece “siparişim nerede” sorusu bir cümle yerine bir şekille yanıtlanır.

Yalnızca teslimata özel değildir. Bir iade, bir başvuru, bir onarım ve bir ilk katılım (onboarding) sürecinin hepsi aynı yapıya sahiptir.

Sipariş 1042Dağıtıma çıktı

Sipariş verildi22 Ağu, 09:14
Rotterdam'da paketlendi23 Ağu, 17:02
Dağıtıma çıktı26 Ağu, 07:40
Teslim edildi

Ekran görüntüsü değildir; tarayıcınızda SDK'nın kendi boyut ve renkleriyle canlı olarak çizilir.

Flutter SDK ve Web SDK ile, her ikisi de 0.1.0 sürümünden itibaren yerel olarak render edilir.

Ne zaman kullanılmamalı

Yüzdelik bir değer için kullanmayın. Bir takipçi adımlarını adlandırır; bir oran için kullanılacak blok progress bileşenidir.

Kullanıcının yapması gereken şeyler için de kullanmayın. Buradaki adımlar görevler değil, sistemin bildirdiği durumlardır: Kullanıcının yapması gerekenlerin listesi bir checklist bloğudur.

eta ve as_of (ofsetli ISO 8601), ne zaman beklendiğini ve bu bilginin ne zaman öğrenildiğini belirtir; as_of içermeyen bir eta doğrulamadan geçemez. Geçmişteki veya uzun zaman önce öğrenilmiş bir ETA, hiçbir zaman “yaklaşık 25 dk içinde” şeklinde değil, o an “itibarıyla” bir saat olarak çizilir. eta_label (“14:20–14:40”) bunun nasıl ifade edileceğidir; bir adımın note alanı altındaki tek satırdır ve reference, kopyalama düğmesine sahip takip numarasıdır. Tümü Flutter 0.40.0 / Web 0.17.0 sürümünden bu yana geçerlidir.

Props

Her blok ayrıca type ve 1 ila 300 karakterden oluşan zorunlu bir fallback_text taşır.

Prop	Tür	Zorunlu	Kısıtlamalar
`title`	string	Hayır	En fazla 120 karakter.
`steps`	array	Evet	2 ila 12 öğe. Tek bir adım bir zaman çizelgesi değildir.
`steps[].label`	string	Evet	1 ila 80 karakter.
`steps[].status`	`done` \| `current` \| `pending`	Evet	Yok
`steps[].timestamp`	string	Hayır	En fazla 40 karakter. Sizin tarafınızdan biçimlendirilir.
`steps[].note`	string	Hayır	En fazla 160 karakter.
`eta`	string	Hayır	Farkıyla birlikte ISO 8601 (`2026-10-10T09:30:00+03:00`) veya `Z`.
`eta_label`	string	Hayır	En fazla 40 karakter.
`as_of`	string	Hayır	Farkıyla birlikte ISO 8601 (`2026-10-10T09:30:00+03:00`) veya `Z`.
`reference`	object	Hayır	Yok
`reference.label`	string	Evet	1 ila 30 karakter.
`reference.value`	string	Evet	1 ila 40 karakter.

Ağ üzerinde

{
  "id": "blk_08",
  "type": "order_tracker",
  "fallback_text": "Order 1042 is out for delivery, packed on 23 August.",
  "props": {
    "title": "Order 1042",
    "steps": [
      {
        "label": "Ordered",
        "status": "done",
        "timestamp": "22 Aug, 09:14"
      },
      {
        "label": "Packed in Rotterdam",
        "status": "done",
        "timestamp": "23 Aug, 17:02"
      },
      {
        "label": "Out for delivery",
        "status": "current",
        "timestamp": "26 Aug, 07:40"
      },
      {
        "label": "Delivered",
        "status": "pending"
      }
    ]
  }
}

Etkileşim

Yalnızca reference üzerindeki kopyalama düğmesi. Adımlar salt bilgi göstergesidir.

Durumlar

Durum	SDK'nın çizdiği görünüm
Loading	Nokta ve etiket içeren üç yer tutucu satırı.
Empty	Boş bir `steps` dizisi, plakanın içinde `fallback_text` render eder.
All pending	Her nokta açık bir halkadır ve bağlayıcı çok ince (hairline) kalınlıkta kalır. Geçerli olmayan hiçbir şey mevcut olarak işaretlenmez.
No current step	Tamamen geçerlidir: Tamamlanmış bir zaman çizelgesinin tümü `done` durumundadır ve iptal edilmiş bir zaman çizelgesinde hiçbiri bulunmayabilir.

Erişilebilirlik

Her üç durum da mürekkep rengiyle çizilir: Zaman çizelgesi bir göstergedir ve vurgu rengi okuyucunun üzerinde işlem yapabileceği öğelere ayrılmıştır. Beklediğiniz adım bunun yerine yapısal olarak işaretlenir: Satırı bir vurgu şeridi üzerinde yer alır ve bloğun başındaki kapsül onu adlandırır. Tamamlanan adımlar bir onay işareti, mevcut adım bir halka içinde bir nokta ve beklemede olanlar ise kesikli bir halka taşır; çizgi de mevcut adımdan itibaren kesiklidir.

Her adım etiketini, zaman damgasını ve durumunu sözcüklerle seslendirir (“Dağıtıma çıktı, 26 Ağu 07:40, devam ediyor”); çünkü durumu görsel olarak taşıyan nokta, ekran okuyucuya hiçbir şey aktarmaz.

fallback_text, bloğu üreten sorunun yanıtı bu olduğundan mevcut adımı belirtmelidir.