Curve
- Flutter kursu
- Orta seviye
- Ders 79/99
- 4 dk
Curves sınıfı ile zamanlama eğrisi seçmeyi öğrenirsin.
Curves sınıfı
Curves sınıfı, animasyonun zamanlama eğrisini seçmeni sağlar. Curves.easeIn yavaştan başlar, Curves.easeOut yavaş biter, Curves.easeInOut hem yavaş başlar hem yavaş biter. Bu eğriler animasyonun doğal hissettirmesini sağlar.
AnimatedContainer(
duration: const Duration(seconds: 1),
curve: Curves.easeInOut,
width: 200,
)curve parametresi varsayılan olarak Curves.linear kullanır.
curve parametresi
curve parametresi AnimatedContainer ve diğer animasyonlu widget'larda bulunur. Bu parametreye Curves.easeInOut gibi bir değer verirsen, animasyonun zamanlaması bu eğriye göre şekillenir. Doğrusal geçiş yerine eğri kullanmak, animasyonu daha doğal yapar.
AnimatedContainer(
duration: const Duration(seconds: 1),
curve: Curves.easeOut,
width: 200,
)Uygulama Curves ile animasyon
Bir StatelessWidget olan Ornek tanımla. build metodu bir AnimatedContainer döndürsün; duration Duration(seconds: 1), curve Curves.easeInOut, width 200 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
// curve Curves.easeInOut olsun
// width 200 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),
curve: Curves.easeInOut,
width: 200,
);
}
}
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 Hangisi geçerli bir Curves değeridir?
- Curves.slowIn
- Curves.quickIn
- Curves.hardOut
- Curves.easeIn Doğru cevap
Açıklama: Curves.easeIn geçerli bir eğridir. slowIn, quickIn ve hardOut Curves sınıfında tanımlı değildir; doğru adlar easeIn, easeOut ve easeInOut'dur.
2 curve parametresi
AnimatedContainer(
duration: const Duration(seconds: 1),
____: Curves.easeInOut,
width: 200,
)AnimatedContainer(
duration: const Duration(seconds: 1),
curve: Curves.easeInOut,
width: 200,
)Açıklama: curve, AnimatedContainer'ın zamanlama eğrisini belirten parametresidir. tween bir geçiş nesnesidir, animation bir Animation nesnesidir, style ise TextStyle gibi stil nesneleri içindir; bunlar curve parametresi değildir.
3 Curves parçaları
| Kavram | Anlamı |
|---|---|
Curves.easeIn |
yavaş başlayan eğri |
Curves.easeOut |
yavaş biten eğri |
Curves.easeInOut |
iki ucu yavaş eğri |
Curves.linear |
sabit hızlı eğri |