Liste ve onTap
- Flutter kursu
- Başlangıç
- Ders 73/99
- 4 dk
Liste satırına onTap ekleyip görevi tamamlama işaretlersin.
Liste satırına onTap
Liste satırına dokunulduğunda görevin tamamlanma durumunu değiştirmek için onTap kullanılır. ListTile'ın onTap callback'inde, ilgili Todo'nun done alanını tersine çevirir ve setState ile ekranı yeniden çizersin.
ListTile(
title: Text(todo.title),
onTap: () {
setState(() {
todo.done = !todo.done;
});
},
)done alanını tersine çevirme
Görevi tamamlamak için todo.done = !todo.done ifadesi kullanılır. Bu, true'yu false'a, false'u true'ya çevirir. Değişikliğin ekranda görünmesi için bu işlem setState içinde yapılmalıdır; aksi halde ekran yeniden çizilmez.
Uygulama Görevi tamamla
tamamla adında bir fonksiyon yaz; List<Todo> ve int index parametreleri alsın, ilgili Todo'nun done alanını true yapsın ve 'Tamamlandi' yazdırsın. main içinde iki görevli bir liste oluştur ve tamamla'yı 0 indeksiyle çağır.
Başlangıç kodu
import 'package:flutter/material.dart';
class Todo {
String title;
bool done;
Todo({required this.title, this.done = false});
}
// tamamla fonksiyonu yaz: List<Todo> ve int index alsin
// ilgili Todo'nun done alanini true yap
// "Tamamlandi" yazdirsin
void main() {
final list = [Todo(title: 'A'), Todo(title: 'B')];
// tamamla'yi cagir
}Örnek çözüm
import 'package:flutter/material.dart';
class Todo {
String title;
bool done;
Todo({required this.title, this.done = false});
}
void tamamla(List<Todo> list, int index) {
list[index].done = true;
print('Tamamlandi');
}
void main() {
final list = [Todo(title: 'A'), Todo(title: 'B')];
tamamla(list, 0);
}Beklenen çıktı
Tamamlandi
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 setState ne işe yarar?
- Klavyeyi açar
- Navigator'ı çağırır
- Widget'ı yeniden çizer Doğru cevap
- Listeyi siler
Açıklama: setState, State içindeki değişiklikten sonra widget'ı yeniden çizmek için kullanılır; klavye açmaz, Navigator çağırmaz, listeyi silmez.
2 setState çağrısı
onTap: () {
____(() {
todo.done = !todo.done;
});
},onTap: () {
setState(() {
todo.done = !todo.done;
});
},Açıklama: State içinde değişiklikten sonra ekranı yeniden çizmek için setState çağrılır; build, refresh veya update aynı işi yapmaz.
3 onTap ve setState parçaları
| Kavram | Anlamı |
|---|---|
onTap |
Satıra dokunma callback'i |
setState |
Ekranı yeniden çizer |
done |
Tamamlanma alanı |
ListTile |
Satır widget'ı |