Özet - Sayaç uygulaması
- Flutter kursu
- Başlangıç
- Ders 95/99
- 4 dk
Tüm parçaları birleştirip çalışan sayaç uygulamasını tamamlarsın.
Tüm parçaları birleştir
Çalışan bir sayaç uygulaması üç temel parçayı birleştirir: StatefulWidget (durum tutma), setState (değişiklikte yeniden çizme) ve FloatingActionButton (artır butonu). Scaffold'ın body'sinde sayacın değeri gösterilir, appBar'ında başlık bulunur, floatingActionButton'ında artırma butonu yer alır.
Scaffold(
appBar: AppBar(title: Text('Sayac')),
body: Center(child: Text('$_sayac')),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_sayac = _sayac + 1;
});
},
child: Icon(Icons.add),
),
)Uygulama Çalışan sayaç uygulamasını tamamla
uygulamaBasladi adında bir fonksiyon yaz; çağrılınca Sayac uygulamasi yazdırsın. SayacEkrani adında bir StatefulWidget yaz; State içinde bir int sayaç değişkeni tanımla (başlangıç 0). build metodunda bir Scaffold döndürsün; appBar'da AppBar(title: Text('Sayac')), body'de Center(child: Text('$_sayac')), floatingActionButton'da bir FloatingActionButton olsun. FAB'ın onPressed'ı setState ile sayacı 1 artırsın, child Icon(Icons.add) olsun. main içinde uygulamaBasladi'yı çağır ve runApp ile başlat.
Başlangıç kodu
import 'package:flutter/material.dart';
// uygulamaBasladi fonksiyonu yaz: "Sayac uygulamasi" yazdirsin
// SayacEkrani adinda StatefulWidget yaz
// State icine bir int sayaç degiskeni tanimla (baslangic 0)
// Scaffold: appBar, body ve floatingActionButton ekle
// FAB onPressed: setState ile sayaci 1 artirsin, child Icon(Icons.add) olsun
void main() {
// uygulamaBasladi'yi cagir ve runApp ile baslat
}Örnek çözüm
import 'package:flutter/material.dart';
void uygulamaBasladi() {
print('Sayac uygulamasi');
}
class SayacEkrani extends StatefulWidget {
const SayacEkrani({super.key});
@override
State<SayacEkrani> createState() => _SayacEkraniState();
}
class _SayacEkraniState extends State<SayacEkrani> {
int _sayac = 0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Sayac')),
body: Center(child: Text('$_sayac')),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_sayac = _sayac + 1;
});
},
child: Icon(Icons.add),
),
),
);
}
}
void main() {
uygulamaBasladi();
runApp(const SayacEkrani());
}Beklenen çıktı
Sayac uygulamasi
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Çalışan sayaç uygulaması hangi parçaları birleştirir?
- StatefulWidget + setState + FloatingActionButton Doğru cevap
- Text + Padding + Center
- AssetImage + Image.network + BoxFit
- Navigator + push + pop
Açıklama: Sayaç uygulaması StatefulWidget ile durum tutmayı, setState ile yeniden çizmeyi ve FloatingActionButton ile artır butonunu birleştirir; diğer seçenekler bu amaca yönelik değildir.
2 FloatingActionButton parametresini ekle
Scaffold(
appBar: AppBar(title: Text('Sayac')),
body: Center(child: Text('$_sayac')),
____: FloatingActionButton(
onPressed: () {
setState(() {
_sayac = _sayac + 1;
});
},
child: Icon(Icons.add),
),
)Scaffold(
appBar: AppBar(title: Text('Sayac')),
body: Center(child: Text('$_sayac')),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_sayac = _sayac + 1;
});
},
child: Icon(Icons.add),
),
)Açıklama: FloatingActionButton'ı Scaffold'a bağlamak için floatingActionButton parametresi kullanılır; fab, actionButton veya button geçerli parametre adları değildir.
3 Sayaç özeti
| Kavram | Anlamı |
|---|---|
StatefulWidget |
Durumu tutar |
setState |
Değişiklikte yeniden çizer |
FloatingActionButton |
Artırma butonu sağlar |
_sayac |
Sayacın değeri |