Ders İçeriği
Flutter, kullanıcı arayüzü oluşturmak için zengin bir widget kütüphanesi sunar. Temel widget'ların ötesinde, daha karmaşık ve dinamik arayüzler oluşturmak için kullanabileceğiniz birçok ileri seviye widget ve düzen mekanizması bulunmaktadır.
1. ListView, GridView, PageView
Uygulamalarda genellikle kaydırılabilir (scrollable) listeler, ızgaralar veya sayfalar halinde içerik gösterme ihtiyacı doğar. Flutter bu ihtiyacı karşılamak için özel widget'lar sunar.
•ListView: Dikey veya yatay olarak kaydırılabilir, doğrusal bir widget listesi oluşturmak için kullanılır. Büyük veri kümelerini verimli bir şekilde göstermek için idealdir, çünkü sadece ekranda görünen öğeleri oluşturur (lazy loading).
•GridView: Öğeleri iki boyutlu, kaydırılabilir bir ızgara halinde düzenlemek için kullanılır. Fotoğraf galerileri veya ürün katalogları gibi uygulamalar için idealdir.
•PageView: Yatay olarak kaydırılabilir sayfalar oluşturmak için kullanılır. Genellikle tanıtım ekranları, resim galerileri veya sekme navigasyonları için kullanılır.
2. Stack, Card, AppBar, Drawer, BottomNavigationBar
Bu widget'lar, daha zengin ve işlevsel kullanıcı arayüzleri oluşturmak için sıkça kullanılır.
•Stack: Widget'ları üst üste yığmak için kullanılır. Bir widget'ı diğerinin üzerine konumlandırmak istediğinizde (örneğin, bir resmin üzerine metin veya bir düğme yerleştirmek) çok kullanışlıdır. Positioned widget'ı ile Stack içindeki alt widget'ların konumunu hassas bir şekilde ayarlayabilirsiniz.
•Card: Materyal Tasarım yönergelerine uygun, köşeleri yuvarlatılmış ve hafif gölgeli bir kart görünümü oluşturur. Genellikle bilgi bloklarını veya öğeleri görsel olarak ayırmak için kullanılır.
•AppBar: Bir Scaffold widget'ının üst kısmında yer alan, genellikle uygulamanın başlığını, navigasyon düğmelerini ve eylem düğmelerini içeren bir çubuktur.
•Drawer: Genellikle bir AppBar'daki menü ikonuna tıklandığında ekranın yan tarafından açılan bir navigasyon panelidir. Uygulamanın ana navigasyon seçeneklerini veya ayarlarını barındırmak için kullanılır.
•BottomNavigationBar: Ekranın alt kısmında yer alan, genellikle 3 ila 5 arasında navigasyon öğesi içeren bir çubuktur. Uygulamanın ana bölümleri arasında hızlı geçiş yapmak için kullanılır.
3. Custom Widget Oluşturma
Flutter'da uygulamanız büyüdükçe, kod tekrarını önlemek ve daha düzenli bir yapı oluşturmak için kendi özel widget'larınızı oluşturmanız önemlidir. Özel widget'lar, mevcut widget'ları bir araya getirerek veya sıfırdan çizim yaparak oluşturulabilir.
Özel widget'lar genellikle StatelessWidget veya StatefulWidget olarak tanımlanır. Örneğin, uygulamanızda sıkça kullandığınız bir başlık ve alt metin kombinasyonu için özel bir widget oluşturabilirsiniz:
import 'package:flutter/material.dart';
class CustomTitleWidget extends StatelessWidget {
final String title;
final String subtitle;
const CustomTitleWidget({
Key? key,
required this.title,
required this.subtitle,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
title,
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.deepPurple,
),
),
SizedBox(height: 4),
Text(
subtitle,
style: TextStyle(
fontSize: 16,
color: Colors.grey[600],
),
),
],
);
}
}
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Custom Widget Örneği')),
body: Center(
child: CustomTitleWidget(
title: 'Hoş Geldiniz!',
subtitle: 'Uygulamamıza giriş yapın.',
),
),
),
));
}
Bu örnekte, CustomTitleWidget adında yeniden kullanılabilir bir widget oluşturduk. Bu widget, bir Column içinde iki Text widget'ını birleştirerek belirli bir stil ve düzen sağlar. Bu sayede, uygulamanızın farklı yerlerinde aynı başlık-alt başlık kombinasyonunu kolayca kullanabilirsiniz.
4. Responsive Tasarım Prensipleri
Flutter uygulamaları farklı ekran boyutlarına ve yönelimlerine (dikey/yatay) uyum sağlayabilmelidir. Responsive tasarım, uygulamanızın her cihazda iyi görünmesini ve kullanılabilir olmasını sağlamak anlamına gelir. Flutter, responsive tasarım için çeşitli araçlar ve yaklaşımlar sunar:
•MediaQuery: Cihazın ekran boyutu, piksel yoğunluğu, yönelimi gibi bilgilere erişim sağlar. Bu bilgilerle widget'ların boyutunu veya düzenini dinamik olarak ayarlayabilirsiniz.
•LayoutBuilder: Ebeveyn widget'ın kısıtlamalarına (constraints) göre alt widget'ların boyutunu ve düzenini belirlemenizi sağlar. Özellikle dinamik olarak değişen alanlarda farklı düzenler uygulamak için kullanışlıdır.
•FittedBox: Alt widget'ını mevcut alana sığdırmak için ölçeklendirir ve konumlandırır. Metinlerin veya resimlerin belirli bir alana sığmasını sağlamak için kullanışlıdır.
•AspectRatio: Alt widget'ının belirli bir en boy oranını korumasını sağlar.
•Flexible ve Expanded: Row ve Column içinde esnek alanlar oluşturarak responsive düzenler kurmaya yardımcı olurlar (Temel Seviye'de bahsedildi).
Responsive tasarım, uygulamanızın farklı cihazlarda tutarlı ve iyi bir kullanıcı deneyimi sunması için kritik öneme sahiptir. Bu widget'ları ve prensipleri kullanarak, uygulamanızı çeşitli ekran boyutlarına kolayca adapte edebilirsiniz.