Özet - Animasyon temelleri
- Flutter kursu
- Orta seviye
- Ders 80/99
- 4 dk
AnimatedContainer ve Tween'i birleştirerek geçiş kartı yaparsın.
Animasyon birleşimi
AnimatedContainer, Tween ve Curves'i birleştirerek yumuşak animasyonlar yaparsın. AnimatedContainer duration ve curve alır, Tween begin ve end arasında değer üretir, Curves ise zamanlamayı şekillendirir.
AnimatedContainer(
duration: const Duration(seconds: 1),
curve: Curves.easeInOut,
width: tween.transform(animasyon.value),
)Bu üç parça birlikte hem değer geçişini hem de zamanlama eğrisini kontrol eder.
Uygulama Geçiş kartı yap
GecisKarti adında bir StatelessWidget tanımla. final Animation<double> animasyon alanı required olsun. build metodu bir AnimatedContainer döndürsün; duration Duration(seconds: 1), curve Curves.easeInOut, width animasyon.value olsun. main içinde 'hazir' yazdır.
Başlangıç kodu
import 'package:flutter/material.dart';
class GecisKarti extends StatelessWidget {
final Animation<double> animasyon;
const GecisKarti({super.key, required this.animasyon});
// build metodu AnimatedContainer döndürsün
// duration Duration(seconds: 1) olsun
// curve Curves.easeInOut olsun
// width animasyonun değerini alsın
}
void main() {
// 'hazir' yazdır
}Örnek çözüm
import 'package:flutter/material.dart';
class GecisKarti extends StatelessWidget {
final Animation<double> animasyon;
const GecisKarti({super.key, required this.animasyon});
@override
Widget build(BuildContext context) {
return AnimatedContainer(
duration: const Duration(seconds: 1),
curve: Curves.easeInOut,
width: animasyon.value,
);
}
}
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 Animasyon birleşiminde hangi parçalar birlikte çalışır?
- Provider + ChangeNotifier + setState
- AnimatedContainer + Tween + Curves Doğru cevap
- GoRouter + GoRoute + context.go
- sqflite + http + jsonDecode
Açıklama: AnimatedContainer animasyonlu geçişi, Tween değer üretimini, Curves zamanlama eğrisini sağlar; üçü birlikte çalışır. Diğer seçenekler veritabanı/ağ, state yönetimi ve navigasyon ile ilgilidir.
2 Curves değeri
AnimatedContainer(
duration: const Duration(seconds: 1),
curve: ____,
width: animasyon.value,
)AnimatedContainer(
duration: const Duration(seconds: 1),
curve: Curves.easeInOut,
width: animasyon.value,
)Açıklama: curve parametresi Curves sınıfından bir değer alır; Curves.easeInOut geçerli bir eğridir. Tween.easeInOut diye bir değer yoktur, Colors.red bir renktir, Duration.zero bir süredir; bunlar curve değeri değildir.
3 Özet parçaları
| Kavram | Anlamı |
|---|---|
AnimatedContainer |
animasyonlu container |
Tween |
başlangıç ve bitiş geçişi |
Curves |
zamanlama eğrisi |
duration |
animasyon süresi |