Flutter’da Stack, Positioned, Expanded ve Flexible Widget’larının Kullanımı
Flutter, kullanıcı arayüzlerini esnek ve dinamik bir şekilde oluşturmak için geniş bir widget yelpazesi sunar. Bu makalede, Stack, Positioned, Expanded ve Flexible widget’larının profesyonel bir şekilde nasıl kullanılacağını inceleyeceğiz. Bu widget’lar, özellikle kompleks ve estetik arayüzler oluşturmak için kritik öneme sahiptir.
Giriş
Flutter’da kullanıcı arayüzü oluşturmanın temel taşı olan widget’lar, belirli görevler ve düzenler için optimize edilmiştir. Stack, Positioned, Expanded ve Flexible widget’ları, birden fazla widget’ı üst üste yerleştirme, belirli pozisyonlara yerleştirme ve mevcut alanı esnek bir şekilde dağıtma gibi işlemler için kullanılır. Bu makalede, bu widget’ların kullanımını, işlevlerini ve nasıl en iyi şekilde kullanılacaklarını detaylarıyla paylaşıyor olacağım.
Stack Widget
Stack widget’ı, bir dizi widget’ı üst üste koyarak kompleks ve estetik görünümler elde etmemizi sağlar. Bu widget, children parametresi aracılığıyla birden fazla widget alır ve bu widget’ları birbirinin üzerine yerleştirir. Fit parametresi ile Stack’in boyutu ile child widget’ların boyutu arasındaki ilişki belirlenir. StackFit.loose ve StackFit.expand olmak üzere iki seçenek sunar.
**ÖRNEK**
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Stack Widget Example')),
body: Stack(
fit: StackFit.expand,
children: [
Container(color: Colors.red),
Container(color: Colors.green, width: 200, height: 200),
Positioned(
top: 50,
left: 50,
child: Container(color: Colors.blue, width: 100, height: 100),
),
],
),
),
);
}
}
Yukarıdaki örnekte, Stack widget’ı kullanılarak üç farklı widget üst üste yerleştirilmiştir. İlk widget tüm alanı kaplarken, ikinci widget belirli bir boyutta yerleştirilmiştir. Üçüncü widget ise Positioned widget’ı kullanılarak belirli bir konuma yerleştirilmiştir.
Positioned Widget
Positioned widget’ı, Stack içinde yer alan widget’ları belirli bir pozisyona yerleştirmek için kullanılır. top, bottom, left, right gibi parametrelerle widget’ın konumu belirlenir. Positioned widget’ı yalnızca Stack içinde kullanılır ve Stack’in altındaki widget’lar üzerinde konumlandırma yapar.
**ÖRNEK**
Positioned(
top: 10,
left: 10,
child: Container(
width: 100,
height: 100,
color: Colors.yellow,
),
),Yukarıdaki örnekte, Positioned widget’ı kullanılarak sarı renkli bir container belirli bir pozisyona yerleştirilmiştir. Bu, kullanıcılara dinamik ve hassas yerleştirme olanakları sunar.
Expanded Widget
Expanded widget’ı, Row, Column veya Flex gibi widget’lar içinde yer alarak mevcut alanı dağıtmaya yardımcı olur. Child widget’ın boş alanı doldurmasını sağlar ve bir widget’ın genişliğini veya yüksekliğini genişletmek için kullanılır. flex parametresi ile alan paylaşımı yapılır.
**Örnek:**
Column(
children: [
Expanded(
flex: 2,
child: Container(color: Colors.blue),
),
Expanded(
flex: 1,
child: Container(color: Colors.green),
),
],
),Bu örnekte, Expanded widget’ı kullanılarak iki farklı widget’ın alanı paylaşması sağlanmıştır. Mavi renkli widget, alanın iki katını alırken, yeşil renkli widget alanın geri kalanını alır.
Flexible Widget
Flexible widget’ı, Expanded widget’ının yerine kullanılabilir ve aynı temel işlevi görür; ancak flex özelliği olmadan esneklik sağlar. Flexible widget’ı, child widget’ın esnekliği üzerinde daha fazla kontrol sağlar ve widget’ın boyutunu esnek bir şekilde ayarlar.
**Örnek:**
Row(
children: [
Flexible(
child: Container(color: Colors.red, width: 100),
),
Flexible(
child: Container(color: Colors.blue, width: 200),
),
],
),Yukarıdaki örnekte, Flexible widget’ı kullanılarak iki container widget’ı esnek bir şekilde yerleştirilmiştir. Her iki widget da mevcut alana uyum sağlar.
Sonuç
Bu makalede, Flutter’da Stack, Positioned, Expanded ve Flexible widget’larının kullanımını detaylı bir şekilde ele aldık. Bu widget’lar, kullanıcı arayüzlerini oluştururken esneklik ve kontrol sağlar. Yukarıdaki örnekler, bu widget’ların profesyonel projelerde nasıl kullanılabileceğine dair pratik bir rehber sunmaktadır. Flutter’ın sunduğu bu esneklik ve güç sayesinde, karmaşık ve estetik arayüzler oluşturmak mümkündür.
Özet
- **Stack**: Widget’ları üst üste koymak için kullanılır.
- **Positioned**: Stack içindeki widget’ları belirli bir pozisyona yerleştirir.
- **Expanded**: Mevcut alanı dağıtarak child widget’ların boş alanı doldurmasını sağlar.
- **Flexible**: Expanded gibi çalışır, ancak daha fazla esneklik kontrolü sunar.
Flutter ile geliştirilen projelerde bu widget’ları etkili bir şekilde kullanarak, kullanıcı deneyimini artırabilir ve daha profesyonel görünümler elde edebilirsiniz.
Konuyla ilgili geliştirmiş olduğum uygulamaya Github üzerinden erişebilirsiniz.
