Flutter: LayoutBuilder ile Responsive Breakpoint Tasarımı

Responsive tasarım artık sadece mobil ekranlara uyum sağlamak değil. Flutter uygulamaları web ve masaüstüne de açıldığı için, ekran genişliğine göre farklı düzenler üretmek çok daha önemli hale geldi. Bu yazıda LayoutBuilder ile breakpoint tabanlı responsive tasarım kuracağız.

Live Demo

Aşağıdaki interaktif örnekte LayoutBuilder responsive tasarımı deneyebilirsiniz:

💡 Eğer yukarıdaki örnek açılmazsa, DartPad linkine tıklayarak yeni sekmede çalıştırabilirsiniz.

Neden Breakpoint Kullanmalısınız?

Sabit genişlikler, küçük ekranda taşmaya ve büyük ekranda boş alan israfına yol açar. Breakpoint yaklaşımı sayesinde her cihaz sınıfı için doğru düzeni seçebilirsiniz.

SEO tarafında da kullanıcılar genellikle "flutter layoutbuilder responsive", "flutter breakpoint" ve "responsive web flutter" gibi terimlerle çözüm arar.

LayoutBuilder Ne Sağlar?

LayoutBuilder, parent widget'ın constraints bilgisini verir. Bu sayede ekran genişliğine göre farklı widget ağaçları döndürebilirsiniz.

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth < 600) {
      return const MobileLayout();
    } else if (constraints.maxWidth < 1024) {
      return const TabletLayout();
    } else {
      return const DesktopLayout();
    }
  },
)

Önerilen Breakpoint Mantığı

Başlangıç için pratik bir dağılım:

• 0-599 px: Mobile
• 600-1023 px: Tablet
• 1024 px ve üstü: Desktop/Web

Bu aralıklar sabit kural değildir, ama çoğu proje için iyi bir başlangıç noktasıdır.

Gerçek Bir Responsive Örnek

class ResponsiveHome extends StatelessWidget {
  const ResponsiveHome({super.key});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth < 600) {
          return _MobileHome();
        }

        if (constraints.maxWidth < 1024) {
          return _TabletHome();
        }

        return _DesktopHome();
      },
    );
  }
}

Mobile İçin Ne Farklı Olmalı?

Mobilde tek sütunlu yapı daha doğaldır. Navigation basit olmalı ve içerik dikey akışa uygun tasarlanmalıdır.

Column(
  children: const [
    SizedBox(height: 16),
    Text('Mobile Layout'),
  ],
)

Tablet İçin Ne Farklı Olmalı?

Tablet ekranlarda iki sütunlu yapılar çok iyi çalışır. Liste + detay, side menu + içerik veya kart grid'i bu aşamada daha dengeli görünür.

Row(
  children: [
    SizedBox(width: 240, child: SideMenu()),
    Expanded(child: TabletContent()),
  ],
)

Desktop ve Web İçin En İyi Yaklaşım

Desktop tarafında içerik merkezlenmeli, maksimum genişlik sınırlanmalı ve boş alan bilinçli kullanılmalıdır.

Center(
  child: ConstrainedBox(
    constraints: const BoxConstraints(maxWidth: 1200),
    child: Row(
      children: const [
        Expanded(flex: 2, child: ContentArea()),
        SizedBox(width: 24),
        Expanded(child: Sidebar()),
      ],
    ),
  ),
)

MediaQuery ile LayoutBuilder Arasındaki Fark

MediaQuery tüm ekranın bilgisini verir. LayoutBuilder ise bulunduğu parent'ın gerçek constraints değerini verir.

Bu fark önemlidir çünkü bazen widget tam ekran değildir ve ekran yerine kendi kapsayıcısının genişliğine göre karar vermek gerekir.

Sık Yapılan Hatalar

• Her ekran için tek layout kullanmak
• Breakpoint'leri tasarım yerine rastgele belirlemek
• Geniş ekranlarda metni sol tarafa sıkıştırmak
• Widget'ları sadece MediaQuery ile kontrol edip parent yapıyı görmezden gelmek

SEO Açısından Neden Güçlü Bir Konu?

Responsive tasarım, Flutter web, desktop ve tablet geliştirme ile doğrudan bağlantılıdır. Bu nedenle doğru başlık yapısı, breakpoint terimleri ve örnek kodlar, arama motorlarında daha iyi niyet eşleşmesi sağlar.

Sık Sorulan Sorular

LayoutBuilder mı MediaQuery mi kullanmalıyım?

Eğer parent boyutuna göre karar verecekseniz LayoutBuilder, cihaz genel bilgisi gerekiyorsa MediaQuery tercih edin.

Desktop uygulamada responsive tasarım gerekli mi?

Evet. Masaüstünde de pencere boyutu değişebilir ve arayüzün taşmadan uyum sağlaması gerekir.

Aynı projede birden fazla breakpoint kullanabilir miyim?

Evet. Hatta büyük projelerde bu daha doğru yaklaşımdır.

Özet

Flutter'da responsive breakpoint tasarımı için LayoutBuilder en temiz çözümlerden biridir. Mobile, tablet ve desktop/web için ayrı düzenler üretmek; kullanıcı deneyimini, okunabilirliği ve SEO uyumlu içerik mimarisini aynı anda güçlendirir.