Ders İçeriği
Kullanıcı arayüzünü daha dinamik ve etkileşimli hale getirmek için animasyonlar ve özel çizimler Flutter uygulamalarında önemli bir rol oynar. Flutter, hem hazır animasyon widget'ları hem de özel çizimler için esnek API'ler sunar.
3.1. Implicit Animasyonlar (AnimatedContainer, AnimatedOpacity)
Implicit animasyonlar, bir widget'ın belirli bir özelliğini (örneğin boyut, renk, opaklık) değiştirdiğinizde, Flutter'ın bu değişikliği otomatik olarak pürüzsüz bir animasyonla yapmasını sağlayan widget'lardır. Bu tür animasyonlar genellikle daha basittir ve daha az kod gerektirir.
•AnimatedContainer: Bir Container widget'ının boyut, renk, dolgu, kenar boşluğu, kenarlık gibi özelliklerini değiştirdiğinizde otomatik olarak animasyonlu geçişler sağlar.
•AnimatedOpacity: Bir widget'ın opaklığını (şeffaflığını) animasyonlu bir şekilde değiştirmek için kullanılır.
Diğer implicit animasyon widget'ları arasında AnimatedCrossFade, AnimatedDefaultTextStyle, AnimatedPadding, AnimatedPositioned ve AnimatedSwitcher bulunur. Bu widget'lar, UI'a hızlı ve kolay bir şekilde animasyon eklemek için harikadır.
3.2. Explicit Animasyonlar (AnimationController, Tween)
Daha karmaşık ve özelleştirilmiş animasyonlar için explicit animasyonlar kullanılır. Bu, animasyonun her adımını manuel olarak kontrol etmenizi sağlar. AnimationController ve Tween ana bileşenlerdir.
•AnimationController: Animasyonun ilerlemesini kontrol eder. Animasyonun başlatılması, durdurulması, ileri/geri oynatılması ve süresi gibi özelliklerini yönetir.
•Tween (Ara Değer): Animasyonun başlangıç ve bitiş değerleri arasındaki geçişi tanımlar. Örneğin, bir sayının 0'dan 1'e, bir rengin maviden kırmızıya veya bir boyutun küçükten büyüğe geçişini tanımlayabilir.
•Animation: Bir Tween ve bir AnimationController'ın birleşimiyle oluşan, animasyonun mevcut değerini temsil eden bir nesnedir.
Örnek: Basit Bir Boyut Animasyonuimport 'package:flutter/material.dart';
class ExplicitAnimationExample extends StatefulWidget {
const ExplicitAnimationExample({Key? key}) : super(key: key);
@override
State<ExplicitAnimationExample> createState() => _ExplicitAnimationExampleState();
}
class _ExplicitAnimationExampleState extends State<ExplicitAnimationExample> with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 2), // Animasyon süresi
vsync: this, // TickerProvider
);
_animation = Tween<double>(begin: 50.0, end: 200.0).animate(_controller)
..addListener(() {
setState(() {}); // Animasyon değeri değiştikçe UI'ı yeniden çiz
});
}
@override
void dispose() {
_controller.dispose(); // Controller'ı dispose etmeyi unutmayın!
super.dispose();
}
void _startAnimation() {
if (_controller.status == AnimationStatus.completed) {
_controller.reverse();
} else {
_controller.forward();
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Explicit Animasyon Örneği')),
body: Center(
child: Container(
width: _animation.value,
height: _animation.value,
color: Colors.purple,
child: const Center(child: Text('Animasyonlu', style: TextStyle(color: Colors.white))),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _startAnimation,
child: const Icon(Icons.play_arrow),
),
);
}
}
void main() {
runApp(const MaterialApp(home: ExplicitAnimationExample()));
}
Bu örnekte:
1.AnimationController bir TickerProvider (genellikle SingleTickerProviderStateMixin) ile birlikte tanımlanır. Bu, animasyonun her karede güncellenmesini sağlar.
2.Tween<double>(begin: 50.0, end: 200.0) ile animasyonun 50'den 200'e kadar bir değer aralığında değişeceği belirtilir.
3..animate(_controller) ile Tween ve AnimationController birleştirilerek bir Animation nesnesi oluşturulur.
4.addListener(() { setState(() {}); }) ile animasyonun değeri her değiştiğinde widget'ın yeniden çizilmesi sağlanır.
5._controller.forward() ve _controller.reverse() ile animasyon başlatılır ve tersine çevrilir.
Explicit animasyonlar, daha karmaşık senaryolar (örneğin, birden fazla animasyonu senkronize etmek, özel eğriler kullanmak, fizik tabanlı animasyonlar) için daha fazla kontrol sağlar.
3.3. CustomPainter ile Özel Çizimler
Flutter, CustomPainter widget'ı aracılığıyla doğrudan tuval üzerine çizim yapmanıza olanak tanır. Bu, grafikler, oyunlar veya tamamen özelleştirilmiş UI bileşenleri oluşturmak için güçlü bir araçtır.
CustomPainter iki ana metot içerir:
•paint(Canvas canvas, Size size): Çizim işlemlerinin yapıldığı yerdir. Canvas nesnesi üzerine çizgiler, daireler, dikdörtgenler, yollar (paths) ve metinler çizebilirsiniz. Size nesnesi, çizim alanının boyutunu verir.
•shouldRepaint(CustomPainter oldDelegate): Widget'ın yeniden çizilmesi gerekip gerekmediğini belirler. Performans için önemlidir; sadece çizimin değişmesi gerektiğinde true döndürmelisiniz.
Örnek: Basit Bir Çember Çizimiimport 'package:flutter/material.dart';
import 'dart:math' as math;
class CustomPaintExample extends StatelessWidget {
const CustomPaintExample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('CustomPainter Örneği')),
body: Center(
child: CustomPaint(
size: const Size(200, 200), // Çizim alanının boyutu
painter: MyCirclePainter(),
),
),
);
}
}
class MyCirclePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = Colors.blue
..style = PaintingStyle.fill; // Doldurma stili
// Çemberin merkezi ve yarıçapı
final center = Offset(size.width / 2, size.height / 2);
final radius = math.min(size.width / 2, size.height / 2);
canvas.drawCircle(center, radius, paint);
// Kenarlık eklemek için
final strokePaint = Paint()
..color = Colors.black
..style = PaintingStyle.stroke // Çizgi stili
..strokeWidth = 5.0; // Çizgi kalınlığı
canvas.drawCircle(center, radius, strokePaint);
}
@override
bool shouldRepaint(covariant MyCirclePainter oldDelegate) {
return false; // Çizim değişmediği sürece yeniden çizme
}
}
void main() {
runApp(const MaterialApp(home: CustomPaintExample()));
}
CustomPainter ile Yapılabilecekler:
•Çizgiler, Dikdörtgenler, Daireler, Ovalar: Temel geometrik şekiller.
•Yollar (Paths): Karmaşık ve serbest formda şekiller oluşturmak için Path nesnesi kullanma.
•Metin Çizimi: TextPainter kullanarak metinleri tuval üzerine çizme.
•Resim Çizimi: drawImage metodu ile resimleri tuval üzerine yerleştirme.
•Gradiyentler ve Gölgeler: Renk geçişleri ve gölgeler ekleme.
CustomPainter, Flutter'da görsel olarak benzersiz ve performanslı bileşenler oluşturmak için sınırsız olanaklar sunar. Özellikle veri görselleştirme, oyun geliştirme veya özel grafik efektleri gerektiren durumlarda çok değerlidir.