AnimatedContainer
- Flutter kursu
- Orta seviye
- Ders 76/99
- 4 dk
AnimatedContainer ile özellik değişimini animasyonlu yapmayı öğrenirsin.
AnimatedContainer nedir?
AnimatedContainer, Container'ın animasyonlu halidir. width, height, color gibi özellikleri değiştirdiğinde bu değişimi duration süresinde yumuşakça animasyonla yapar. Yeni değer verirsin, gerisini Flutter halleder.
class Ornek extends StatelessWidget {
const Ornek({super.key});
@override
Widget build(BuildContext context) {
return AnimatedContainer(
duration: const Duration(seconds: 1),
width: 50,
color: Colors.blue,
);
}
}Bu widget, width ve color değerleri değiştiğinde otomatik olarak geçiş animasyonu oynatır.
duration parametresi
duration parametresi bir Duration nesnesi alır ve animasyonun toplam süresini belirler. Bu parametre zorunludur; verilmezse AnimatedContainer hangi hızla geçiş yapacağını bilemez. Duration(seconds: 1) bir saniyelik, Duration(milliseconds: 300) ise 300 milisaniyelik geçiş yapar.
AnimatedContainer(
duration: const Duration(milliseconds: 300),
width: 100,
)Uygulama AnimatedContainer tanımla
Bir StatelessWidget olan Ornek tanımla. build metodu bir AnimatedContainer döndürsün; duration Duration(seconds: 1), width 50 olsun. main içinde 'hazir' yazdır.
Başlangıç kodu
import 'package:flutter/material.dart';
class Ornek extends StatelessWidget {
const Ornek({super.key});
// build metodu AnimatedContainer döndürsün
// duration Duration(seconds: 1) olsun
// width 50 olsun
}
void main() {
// 'hazir' yazdır
}Örnek çözüm
import 'package:flutter/material.dart';
class Ornek extends StatelessWidget {
const Ornek({super.key});
@override
Widget build(BuildContext context) {
return AnimatedContainer(
duration: const Duration(seconds: 1),
width: 50,
);
}
}
void main() {
print('hazir');
}Beklenen çıktı
hazir
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 AnimatedContainer'ın hangi parametresi animasyonun süresini belirler?
- width
- color
- child
- duration Doğru cevap
Açıklama: duration parametresi animasyonun ne kadar süreceğini belirler. width ve color animasyonlanan özelliklerdir, child ise iç widget'tır; süreyle ilgileri yoktur.
2 duration parametresi
AnimatedContainer(
____: const Duration(seconds: 1),
width: 50,
)AnimatedContainer(
duration: const Duration(seconds: 1),
width: 50,
)Açıklama: duration, AnimatedContainer'ın animasyon süresini belirten zorunlu parametredir. time, speed ve delay AnimatedContainer'ın parametre adları değildir.
3 AnimatedContainer parçaları
| Kavram | Anlamı |
|---|---|
AnimatedContainer |
animasyonlu container |
duration |
animasyon süresi |
width |
genişlik değeri |
color |
renk değeri |