Flutter’da Layout Yönetimi Üzerine Cheat Sheet

 

Layout CheatSheet

Herkese merhaba,

Bugün sizler için flutter’da widget’larımızı UI ekranına nasıl yerleştireceğimiz konusunda kolay anlaşılır, görsel örneklerle zenginleştirilmiş ve hap bilgiler içeren bir içerik hazırlamak istedim. Umarım hepimiz için faydalı olur.

1. Ana Layout Widget’ları

Column

Amaç: Widget’ları dikey olarak sıralamak.

Kullanım Alanları: Bir liste oluştururken veya dikey bir düzenleme gerektiğinde kullanılır. Örneğin, bir form ya da bir profil sayfası tasarlarken kullanışlıdır.

Parametreler:

mainAxisAlignment: Dikey eksende hizalamayı ayarlar.

crossAxisAlignment: Yatay eksende hizalamayı ayarlar.

İpucu: Column, flex olarak kabul edilen bir yapıdır. İçerisine yerleştirilen widget'lar mevcut alanı doldurur ve Expanded ya da Flexible kullanılarak bu alanın nasıl paylaştırılacağı kontrol edilebilir.

Column(
 mainAxisAlignment: MainAxisAlignment.center/end/spaceAround/spaceBetween/spaceEvenly/start,
 children: [
   Icon(Icons.home, size: 100, color: Colors.amber),
   Icon(Icons.home, size: 100, color: Colors.teal),
   Icon(Icons.home, size: 100, color: Colors.blueAccent),
  ],
 ),

Column — MainAxisAligment

Column(
  crossAxisAlignment: CrossAxisAlignment.center/end/start/stretch,
  children: [
    Icon(Icons.home, size: 100, color: Colors.amber),
    Icon(Icons.home, size: 200, color: Colors.teal),
    Icon(Icons.home, size: 100, color: Colors.blueAccent),
  ],
),

Column — CrossAxisAlignment

Row

Amaç: Widget’ları yatay olarak yan yana sıralamak.

Kullanım Alanları: İkonlar ve metinlerin yan yana gösterilmesi gerektiği durumlarda kullanılır. Örneğin, bir uygulama çubuğunda (AppBar) ikonlar ve metinler genellikle Row ile düzenlenir.

Parametreler:

mainAxisAlignment: Yatay eksende hizalamayı ayarlar.

crossAxisAlignment: Dikey eksende hizalamayı ayarlar.

İpucu: Row, çocuk widget’larına yatay alan sağlar. Eğer öğeler fazla geniş olursa, taşma meydana gelebilir. Bu durumda Expanded ya da Flexible kullanmak gerekebilir.

Row(
  mainAxisAlignment: MainAxisAlignment.center/end/spaceAround/spaceBetween/spaceEvenly/start,
  children: [
    Icon(Icons.home, size: 100, color: Colors.amber),
    Icon(Icons.home, size: 100, color: Colors.teal),
    Icon(Icons.home, size: 100, color: Colors.blueAccent),
  ],
),

Row — MainAxisAlignment

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Icon(Icons.home, size: 100, color: Colors.amber),
    Icon(Icons.home, size: 200, color: Colors.teal),
    Icon(Icons.home, size: 100, color: Colors.blueAccent),
  ],
),

Row — CrossAxisAlignment

Stack

Amaç: Widget’ları üst üste yığmak.

Kullanım Alanları: Genellikle z-index kontrolü gerektiren durumlarda, yani bir widget’ın diğerinin üzerine bindirilmesi gerektiğinde kullanılır. Örneğin, bir görselin üzerine metin eklemek için kullanılabilir.

Parametreler:

Positioned: Çocuk widget'ı belirli bir konuma yerleştirmek için kullanılır. top, left, right, bottom gibi parametrelerle pozisyon ayarlanabilir.

İpucu: Stack, hem esneklik hem de karmaşık düzenlemeler sunar. Align veya Positioned widget'larıyla öğeler belirli noktalara hizalanabilir veya konumlandırılabilir.

Stack(
  children: [
    Container(color: Colors.blue, width: 100, height: 100),
    Positioned(
      top: 10,
      left: 10,
      child: Icon(Icons.star, color: Colors.white),
    ),
  ],
);

Stack

2. Esnek Layout Widget’ları

Expanded

Amaç: Mevcut alanın tamamını doldurmak veya esnek bir alan kaplamak.

Kullanım Alanları: Genellikle Row veya Column içinde kullanılarak bir widget’ın kalan boşluğu doldurması sağlanır. Örneğin, ekranın genişliğini tamamen kaplamasını istediğiniz bir buton için kullanabilirsiniz.

Parametreler:

flex: Birden fazla Expanded widget olduğunda, her birine ayrılacak alan oranını belirler.

İpucu: Expanded, bir Row veya Column içindeki alanı, diğer öğelerle esnek bir şekilde paylaşır. flex parametresi ile bu paylaşım oranı ayarlanabilir.

Row/Column(
  children: [
    Expanded(flex: 2, child: Container(color: Colors.amberAccent)),
    Expanded(flex: 1, child: Container(color: Colors.teal)),
  ],
),

Row ve Column içerisinde Expanded kullanımı

Flexible

Amaç: Bir widget’ın mevcut alanı doldurması, ancak bu alanın esnek olabilmesi için kullanılır.

Kullanım Alanları: Bir widget’ın belirli bir alan kaplaması gerektiğinde, ancak bu alanın daha da genişleyebilmesi veya daralabilmesi için kullanılır.

Parametreler:

fit: FlexFit.tight (Expanded gibi tüm alanı kaplar) veya FlexFit.loose (yalnızca ihtiyaç duyduğu kadar alan kaplar).

İpucu: Flexible, Expanded’a göre daha kontrollü bir esneklik sunar. fit parametresiyle ne kadar alan kaplayacağı belirlenebilir.

Row/Column(
  children: [
    Flexible(child: Container(color: Colors.green, height: 100)),
    Flexible(fit: FlexFit.loose, child: Container(color: Colors.yellow, height: 160)),
  ],
),

Row ve Column içerisinde Flexible kullanımı

3. Kutu (Box) Widget’ları

Container

Amaç: Bir widget’ı stilize etmek, padding, margin ve dekorasyon eklemek için kullanılır.

Kullanım Alanları: Genellikle bir widget’ın stilini ve boyutunu kontrol etmek için kullanılır. Bir resmin üzerine gölge eklemek veya bir metni belirli bir alanda konumlandırmak için ideal bir seçimdir.

Parametreler:

padding: İçeriğin kenarlarından olan boşluk.

margin: Dışarıdan olan boşluk.

decoration: Arka plan rengi, border veya gölge eklemek için kullanılır.

İpucu: Container, stil ve düzenleme kontrolü sağlar. İçerisine yerleştirilen widget’ın stilini ve pozisyonunu kontrol etmek için kullanılır.

Container(
  padding: const EdgeInsets.all(16.0),
  margin: const EdgeInsets.all(8.0),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10),
  ),
  child: const Text(
    'Container with Padding',
    style: TextStyle(fontSize: 26.0),
  ),
),

Padding parametresi verilmiş bir Container Örneği

SizedBox

Amaç: Sabit genişlik ve yükseklik belirlemek.

Kullanım Alanları: İki widget arasında sabit bir boşluk bırakmak veya belirli bir boyutta bir widget oluşturmak için kullanılır.

İpucu: SizedBox, boşluk oluşturmak veya belirli bir boyutta görünür/görünmez widget yerleştirmek için kullanılabilir.

SizedBox(
  width: 100,
  height: 50,
  child: Text('Sized Box', 
    style: TextStyle(fontSize: 26.0),
  ),
),

SizedBox — Inspector

Padding

Amaç: Bir widget’ın etrafına boşluk eklemek.

Kullanım Alanları: İçeriğin kenarlardan belirli bir uzaklıkta olması gerektiğinde kullanılır. Örneğin, bir butona içeriden boşluk eklemek için kullanabilirsiniz.

İpucu: Padding, Container gibi bir stil widget’ı olup sadece padding eklemek için optimize edilmiştir.

Padding(
  padding: EdgeInsets.all(16.0),
  child: Text(
    'Padded Text',
    style: TextStyle(fontSize: 26.0),
  ),
),

Padding — Inspector

Align

Amaç: Bir widget’ı belirli bir konuma hizalamak.

Kullanım Alanları: Widget’ı bir alan içinde belirli bir noktaya yerleştirmek gerektiğinde kullanılır. Örneğin, bir butonu sağ alt köşeye hizalamak için Align kullanılabilir.

İpucu: Align, genişliği ve yüksekliği belirli olmayan widget’ları hizalamak için ideal bir widget’tır.

Align(
  alignment: Alignment.bottomRight,
  child: Text(
    'Aligned to Bottom Right',
    style: TextStyle(fontSize: 26.0),
  ),
),

Alignment

Center

Amaç: Bir widget’ı merkezlemek.

Kullanım Alanları: Bir widget’ın dikey ve yatayda tam ortalanması gerektiğinde kullanılır.

İpucu: Center, Align widget’ının özel bir halidir ve hizalamayı her zaman merkeze alır.

Center(
  child: Text('Centered Text', 
    style: TextStyle(fontSize: 26.0),
  ),
);

Center ve Text widget’ları içiçe

4. Grid Düzenlemeleri

GridView

Amaç: Widget’ları ızgara (grid) şeklinde düzenlemek.

Kullanım Alanları: Bir galeri uygulaması veya ürün kataloğu gibi ızgara düzenlemesi gerektiren yerlerde kullanılır.

Parametreler:

crossAxisCount: Yatayda kaç sütun olacağını belirler.

mainAxisSpacing ve crossAxisSpacing: Izgaralar arasındaki boşlukları ayarlar.

İpucu: GridView, öğeleri otomatik olarak ızgaraya yerleştirir. GridView.count kullanımı, belirli bir sütun sayısı belirlemenizi sağlar.

GridView.count(
  crossAxisCount: 3,
  mainAxisSpacing: 10,
  crossAxisSpacing: 10,
  children: [
    Container(color: Colors.redAccent),
    Container(color: Colors.greenAccent),
    Container(color: Colors.blueAccent),
  ],
),

GridView

GridView.builder

Amaç: Dinamik ve performans dostu ızgara düzenlemeleri oluşturmak.

Kullanım Alanları: Büyük veri setleriyle çalışırken performansı artırmak için kullanılır. Örneğin, sonsuz kaydırma özelliği olan bir ürün listesi.

İpucu: GridView.builder, ekranda olmayan widget'ları oluşturmaz, bu sayede performans artışı sağlar.

GridView.builder(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3),
  itemBuilder: (context, index) {
    return Container(
      color: Colors.lightBlueAccent,
      child: Text(
        '$index',
        style: const TextStyle(fontSize: 26.0),
      ),
    );
  },
),

GridView.builder

5. List Düzenlemeleri

ListView

Amaç: Widget’ları dikey bir liste halinde düzenlemek.

Kullanım Alanları: Basit bir listeleme gerektiğinde kullanılır. Örneğin, bir sohbet uygulamasında mesajları listelemek için idealdir.

İpucu: ListView, çok sayıda öğeyi kaydırarak gösterebilir. Performans için ListView.builder tercih edilebilir.

ListView(
  children: const [
    ListTile(
      title: Text(
        'Item 1',
        style: TextStyle(
          fontSize: 26.0,
          color: Colors.red,
        ),
      ),
    ),
    ListTile(
      title: Text(
        'Item 2',
        style: TextStyle(
          fontSize: 26.0,
          color: Colors.blue,
        ),
      ),
    ),
  ],
),

ListView içinde ListTile Kullanımı

ListView.builder

Amaç: Performanslı ve dinamik bir liste oluşturmak.

Kullanım Alanları: Büyük veri setleriyle çalışırken veya öğelerin dinamik olarak üretildiği durumlarda kullanılır. Örneğin, sonsuz kaydırma listesi.

İpucu: ListView.builder, yalnızca ekranda görünen öğeleri oluşturur, bu da performansı önemli ölçüde artırır.

ListView.builder(
  itemCount: 20,
  itemBuilder: (context, index) {
  return ListTile(
    title: Text(
      'Item $index',
      style: const TextStyle(fontSize: 26.0),
      ),
    );
  },
),

ListView.separated

Amaç: Liste öğeleri arasına ayrım çizgisi eklemek.

Kullanım Alanları: Ayrılmış öğeler gerektiren listeler için kullanılır. Örneğin, bir rehber uygulamasında kişi listesi.

İpucu: ListView.separated, her öğe arasında belirli bir widget ekler, genellikle Divider kullanılır.

ListView.separated(
  itemCount: 10,
  separatorBuilder: (context, index) => const Divider(
    thickness: 2.0,
  ),
  itemBuilder: (context, index) {
    return ListTile(title: Text('Item $index'));
  },
),

ListView.separated

6. Diğer Yararlı Widget’lar

Spacer

Amaç: İki widget arasına boşluk eklemek.

Kullanım Alanları: Row veya Column içinde iki widget arasında boşluk bırakmak için kullanılır.

İpucu: Spacer, Expanded gibi davranır, ancak Row veya Column içindeki alanı diğer öğelere göre dengeler.

Column(
  children: [
    Text(
      'Start',
      style: TextStyle(fontSize: 26.0, fontWeight: FontWeight.bold),
    ),
    Spacer(),
    Text(
      'End',
      style: TextStyle(fontSize: 26.0, fontWeight: FontWeight.bold),
    ),
  ],
),

Spacer Örneği

Wrap

Amaç: Yatay veya dikey olarak sıkıştırılmış widget’ları sarar, taşma durumunda alt satıra geçer.

Kullanım Alanları: Yatayda sığmayan öğelerin, alt satıra geçmesi gereken durumlarda kullanılır. Örneğin, etiket (chip) widget’ları.

İpucu: Wrap, esnek bir düzen sağlar ve widget’lar satıra sığmadığında otomatik olarak yeni bir satıra geçer.

Wrap(
  spacing: 18.0,
  runSpacing: 14.0,
  children: [
    Chip(label: Text('Chip 1')),
    Chip(label: Text('Chip 2')),
    Chip(label: Text('Chip 3')),
  ],
),

Wrap widget

AspectRatio

Amaç: Widget’a belirli bir en-boy oranı vermek.

Kullanım Alanları: Görsellerin veya videoların belirli bir en-boy oranıyla gösterilmesi gerektiğinde kullanılır. Örneğin, bir video oynatıcı penceresi.

İpucu: AspectRatio, verilen oran doğrultusunda genişlik ve yüksekliği hesaplar, bu sayede düzen tutarlılığı sağlanır.

Scaffold(
  backgroundColor: Colors.yellowAccent.shade100,
  body: AspectRatio(
     aspectRatio: 16 / 9,
     child: Container(color: Colors.blue),
  ),
),

Flutter’da Layout yönetimi için hazırlamış olduğum bu içeriği umarım beğenirsiniz.

İyi çalışmalar.

Selin.