Mobil-first düşünce Flutter'in varsayilanidir, ancak tablet, foldable ve web/masaustu hedeflerinde ayni kod tabanini bozmadan uyum sağlamak icin bilincli responsive layout kaliplari gerekir. Sabit piksel degerleri kisa vadede hızlı olsa da farklı ekranlarda kirilmalara yol acar. Bu rehber, breakpoint tasarimindan widget secimine kadar pratik bir cerceve sunar.
MediaQuery ve LayoutBuilder
MediaQuery.sizeOf(context) ve MediaQuery.paddingOf(context) cihaz boyutu ile güvenli alan bilgisini verir. LayoutBuilder ise parent'in verdigi max constraint'e gore karar vermenizi sağlar; bu, dialog ve split view icinde daha guvenilirdir. Breakpoint'leri tek merkezde toplayin:
enum FormFactor { compact, medium, expanded }
FormFactor formFactorOf(BoxConstraints c) {
if (c.maxWidth < 600) return FormFactor.compact;
if (c.maxWidth < 1024) return FormFactor.medium;
return FormFactor.expanded;
}Breakpoint stratejisi
Material Design 3, compact / medium / expanded ayrimi onerir. Projenize özel breakpoint secin ve tüm uygulamada ayni esikleri kullanın. Tasarım ekibi farklı figma frame'leri kullansa bile geliştirme tek kaynakli enum veya theme extension uzerinden ilerlemelidir.
- Compact: tek sütun, bottom navigation.
- Medium: iki sütun, navigation rail.
- Expanded: uc sütun, persistent sidebar.
- Foldable: hinge bolgesi icin ayri padding.
Flex ve Expanded kullanımı
Row ve Column icinde Expanded ve Flexible ile oransal alan dagitimi yapilir. Yanlış flex kombinasyonu overflow hatasina neden olur. FlexFit.tight ile zorunlu dolgu, loose ile içerik boyutu korunur. Responsive tasarimda yatay alan arttikca sidebar genisligini sabit tutup içerik alanini Expanded ile buyutmek yaygın bir kalıptır.
Wrap ve Flow alternatifleri
Chip listeleri ve tag alanlarinda Wrap otomatik satir kirar. Cok karmaşık iki boyutlu yerlesim icin custom Flow veya paketler (flutter_staggered_grid_view) kullanılabilir.
Adaptive navigation
NavigationBar telefon, NavigationRail tablet, Drawer veya persistent side panel geniş ekran icin uygundur. Flutter 3.16+ NavigationSuite scaffold yaklasimi bu gecisi otomatiklestirmeye yardım eder. Hedef, ayni route yapisini koruyarak yalnizca kabuk widget'ini degistirmektir.
Grid ve list responsive
GridView.builder ile SliverGridDelegateWithMaxCrossAxisExtent kullanmak, hucre genisligi sabit kalirken sütun sayisinin ekrana gore artmasini sağlar. Listelerde geniş ekranda master-detail pattern: solda liste, sagda detay; dar ekranda push navigation.
- Master-detail icin
go_routershell route kullanın. - Detay panel bosken placeholder gosterin.
- Secili item state'ini route query veya provider'da tutun.
Text ölçeklendirme ve erisilebilirlik
MediaQuery.textScalerOf(context) kullanıcı yazi boyutu tercihini yansitir. Sabit yukseklikli butonlar büyük fontta tasabilir; FittedBox yerine min height ve padding artirmak erisilebilirlik acisindan daha iyidir. Semantics ve kontrast oranlari responsive tasarimin parcasidir.
Orientation ve klavye
Yatay modda form alanlarini iki sutuna bolmek alan verimliligini artirir. Klavye acildiginda viewInsets ile padding ayarlayin; resizeToAvoidBottomInset davranisini ekran bazinda kontrol edin. Modal sheet'lerde DraggableScrollableSheet farklı yuksekliklerde tutarlı davranir.
Platform ve form factor farklari
iOS ve Android platform guideline'lari farklı navigasyon beklentisi getirir. Platform.isIOS ile kosullu widget yerine mümkünse Theme ve CupertinoTheme ile stil ayirin. Web'de hover durumlari ve fare imleci icin MouseRegion ekleyin; dokunmatik varsayimi web'de yetersiz kalir.
Performans ve rebuild
Responsive dallanma her constraint degisiminde rebuild tetikler. Breakpoint hesabini ust seviyede bir kez yapip alt widget'lara enum gecmek, ic ice LayoutBuilder kullanmaktan daha verimlidir. Agir grafikler geniş ekranda görünür olunca yukleniyorsa Visibility + lazy load dusunun.
Test stratejisi
WidgetTester.view fiziksel size ve devicePixelRatio ayarlanabilir. Goldens farklı cozunurluklerde alinmali; CI'da compact ve expanded profilleri ayri test edilmelidir. Emulator'de foldable ve tablet AVD profilleri oluşturmak manuel QA'yi hizlandirir.
SizingPolicy ve içerik genisligi
Geniş ekranda satir uzunlugunu sinirlamak okunabilirligi artirir. Center + ConstrainedBox(maxWidth: 720) kalibi blog ve ayar ekranlarinda yaygindir. Tam genislik gerektiren dashboard'larda ise kart grid'i maxCrossAxisExtent ile dengelenir.
Intrinsic dimensions tuzagi
IntrinsicHeight ve IntrinsicWidth pahali layout gecisleri tetikler; responsive tasarimda mümkün oldukca sabit boyut veya flex tercih edin. Gerekmedikce ic ice intrinsic widget kullanmayin.
Accessibility breakpoint'leri
Ekran genisligi tek kriter olmamali; yüksek contrast modu, bold text ve screen reader aktifken layout bozulmamali. Semantics etiketleri responsive gizleme ile birlikte kullanıldığında içerik tamamen kaybolmamali; ExcludeSemantics yalnizca dekoratif ogelerde kullanılmalıdır.
Responsive layout, piksel kovalamak degil kullanıcıya cihazina uygun bilgi yogunlugu sunmaktir. Merkezi breakpoint, adaptive shell, esnek flex ve erisilebilir tipografi ile tek Flutter kod tabani geniş ekran yelpazesinde tutarlı kalir.
SafeArea ve notch/kamera deligi farklı cihazlarda farklı padding gerektirir; sabit top padding kullanmayin. MediaQuery.padding dinamik kalip alan tanimlar.
AspectRatio widget'i video ve kart gorsellerinde bozulmayi onler; geniş ekranda kart genisligini sinirlamak icin Align + ConstrainedBox ile maxWidth (örneğin 480) kullanın.
Split view'da animasyonlu gecisler iki panel arasinda senkron tutulmalidir; AnimatedSwitcher yalnizca detay panelinde kullanmak jank'i azaltir.
Design token yaklasimi: spacing, radius ve breakpoint degerlerini ThemeExtension icinde toplayin; magic number kullanımını bitirir.
Landscape modda video oynatici full bleed iken form ekranlari okunabilirlik icin max content width ile sinirlanmali; ayni route farklı layout sinifi dondurmemeli, ayni sınıf icinde form factor dalmasi tercih edilmelidir.
Sistem yazi ölçeği 200% uzerindeyse tek sutunlu compact layout bile tasabilir; bu durumda yatay scroll yerine dikey akisa izin verin ve buton yuksekliklerini min 48 dp tutun.
WindowManager ile freeform pencere modunda (Android desktop) ve macOS'ta yeniden boyutlandirma sürekli constraint degisimi üretir; debounce olmadan agir subtree rebuild'lerinden kacinmak icin LayoutBuilder ciktisini memoize edebilirsiniz.
Responsive preview icin VS Code/Android Studio device toolbar yeterli degildir; gerçek tablet ve foldable cihazda safe area ve hinge davranisi farklidir. QA matrisine en az bir fiziksel geniş ekran ekleyin.
Web responsive tasarimda tarayici penceresi sürekli resize edilebilir; minimum genislik ve overflow-x kontrolu CSS benzeri dusunceyle planlanmalidir.
Picture-in-picture ve split screen modlarinda usable alan beklenenden küçük olabilir; kritik CTA'lar her zaman görünür alanda kalmali.
Tablet yatay modda iki panel arasi divider suruklenebilir yapilirsa kullanıcı bilgi yogunlugunu kendisi ayarlar; state SharedPreferences ile saklanabilir.
Responsive tipografi icin ThemeData.textTheme basamaklarini form factor'a gore scale edin; her ekranda copyWith ile fontSize patch'lemek tutarsizlik üretir.
Desktop hedeflerde context menu ve sag tik destegi layout degil etkileşim katmanidir; MouseRegion ve Listener ile geniş ekran deneyimini tamamlayin.
Layout overflow hatalarini gizlemek icin körlemesine FittedBox kullanmak erisilebilirligi bozar; once flex ve wrap ile çözüm arayin.
Breakpoint gecislerinde animasyonlu layout degisimi kullaniyorsaniz sure kisa tutulmali; uzun gecisler orientation degisiminde kullanıcıyı yavas hissettirir.
Design handoff'ta Figma auto-layout ile Flutter flex arasindaki farklari erken konusturmak rework maliyetini dusurur; sabit piksel tasarımlari dogrudan kodlamayin.
Son olarak responsive kalıplari proje basinda Storybook benzeri bir widget catalog'da gosterin; tasarım ve muhendislik ayni breakpoint sozlugunu referans alsin.
Compact modda bottom sheet, expanded modda side panel ayni içeriği farklı kabukta sunabilir; route ve state ortak tutulmalidir.
Bu yaklaşım kod tekrarini azaltir ve farklı form factor'larda tutarlı kullanıcı deneyimi sağlar.
Breakpoint testlerini CI'da otomatiklestirmek regresyonlari erken yakalar.
