Meydan okuma 1
- Flutter kursu
- Başlangıç
- Ders 96/99
- 3 dk
Stateless ve Stateful widget'ları birleştiren bir kart yaparsın.
Stateless ve Stateful birleşimi
Bir uygulamada hem StatelessWidget hem StatefulWidget birlikte kullanılabilir. Dış kabuk genellikle StatelessWidget olarak tasarlanırken, durum tutan kısımlar ayrı bir StatefulWidget olarak yazılır. Bu, kodun düzenli ve yeniden kullanılabilir olmasını sağlar.
class DisKabuk extends StatelessWidget {
@override
Widget build(BuildContext context) {
return IcState();
}
}Uygulama Stateless ve Stateful birleşimi yap
basla adında bir fonksiyon yaz; çağrılınca Basladi yazdırsın. DisKabuk adında bir StatelessWidget yaz; build metodunda IcState adında bir StatefulWidget döndürsün. main içinde basla'yı çağır ve runApp ile DisKabuk'u başlat.
Başlangıç kodu
import 'package:flutter/material.dart';
// DisKabuk adinda bir StatelessWidget yaz
// IcState adinda bir StatefulWidget yaz
void main() {
// basla fonksiyonunu cagir
}Örnek çözüm
import 'package:flutter/material.dart';
class DisKabuk extends StatelessWidget {
const DisKabuk({super.key});
@override
Widget build(BuildContext context) {
return const IcState();
}
}
class IcState extends StatefulWidget {
const IcState({super.key});
@override
State<IcState> createState() => _IcStateState();
}
class _IcStateState extends State<IcState> {
@override
Widget build(BuildContext context) {
return MaterialApp(home: Scaffold(body: Center(child: Text('Merhaba'))));
}
}
void basla() {
print('Basladi');
}
void main() {
basla();
runApp(const DisKabuk());
}Beklenen çıktı
Basladi
Uygulama Sayaç kartı yap
baslat adında bir fonksiyon yaz; çağrılınca Kart hazir yazdırsın. SayacKarti adında bir StatelessWidget yaz; build metodunda SayacState adında bir StatefulWidget döndürsün. SayacState içinde int türünde başlangıç değeri 0 olan bir sayaç değişkeni olsun. main içinde baslat'ı çağır ve runApp ile başlat.
Başlangıç kodu
import 'package:flutter/material.dart';
// SayacKarti adinda bir StatelessWidget yaz
// SayacState adinda durumlu bir widget yaz
// SayacState icinde int turunde baslangic 0 olan bir sayac degiskeni olsun
void main() {
}Örnek çözüm
import 'package:flutter/material.dart';
class SayacKarti extends StatelessWidget {
const SayacKarti({super.key});
@override
Widget build(BuildContext context) {
return const SayacState();
}
}
class SayacState extends StatefulWidget {
const SayacState({super.key});
@override
State<SayacState> createState() => _SayacStateState();
}
class _SayacStateState extends State<SayacState> {
int _sayac = 0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(child: Text('$_sayac')),
),
);
}
}
void baslat() {
print('Kart hazir');
}
void main() {
baslat();
runApp(const SayacKarti());
}Beklenen çıktı
Kart hazir
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Stateless ve StatefulWidget'ı birleştirirken hangi yaklaşım doğrudur?
- Yalnızca MaterialApp kullanılır
- Dış kabuk StatelessWidget, içteki durumlu kısım StatefulWidget Doğru cevap
- Tüm widget'lar StatelessWidget olmalı
- Tüm widget'lar StatefulWidget olmalı
Açıklama: Dış kabuk Stateless, iç durumlu kısım Stateful olarak ayrılır; bu, düzenli ve yeniden kullanılabilir kod sağlar.
2 StatefulWidget adını ekle
class DisKabuk extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ____();
}
}class DisKabuk extends StatelessWidget {
@override
Widget build(BuildContext context) {
return IcState();
}
}Açıklama: İçteki durumlu widget'ı çağırmak için onun sınıf adını kullanmalısın; Text, Container ve SizedBox StatelessWidget'tur.
3 Stateless ve Stateful parçaları
| Kavram | Anlamı |
|---|---|
StatelessWidget |
Dış kabuk |
StatefulWidget |
İç durumlu widget |
build |
Widget'ı oluşturan metod |
setState |
Durumu güncelleyen metod |