LAYOUTS IN FLUTTER: IMPLEMENTING BASIC FLUTTER LAYOUTS EĞİTİMİ

Flutter yerleşiminin temelini kur

Container, Row, Column ve kısıt modeliyle Flutter'da temel arayüz yerleşimi kurmak

Flutter Temel Layout Eğitimi, arayüz yerleşiminin temelini sağlam atmayı öğretir. Program Container ve kutu modeli, padding ve margin, Row ve Column ile dizilim, mainAxis ve crossAxis hizalama, Expanded, Flexible ve Spacer ile alan paylaşımı, BoxConstraints i…

3 gün Temel Seviye Online / Yüz Yüze / Hibrit Sertifikalı

Eğitim Hakkında

Kutu modelinden Row ve Column'a, kısıtlardan ekran birleştirmeye

Bu eğitim, Flutter yerleşiminin temelini sağlam atmayı hedefler. Katılımcılar önce Container ve kutu modeliyle boyut, padding ve margin ilişkisini kavrar; ardından Row ve Column ile öğeleri dizer ve mainAxis ile crossAxis hizalamayı uygular. Expanded, Flexible ve Spacer ile boş alanı paylaşır, BoxConstraints ile kısıt modelini anlar ve taşma hatalarını çözer. Program Text, Image, Icon, Card ve ListTile gibi içerik widget'larıyla gerçek bir ekranı baştan kurmayı öğretir.

Süre ve Format

3 Gün. Her gün dört modül; kısa anlatımın ardından aynı profil ekranı adım adım kurularak yerleşim kararlarının görsel sonucu canlı gösterilir.

Seviye

Temel Seviye — Flutter'da kutu modeli, Row ve Column ile temel yerleşimin mantığını öğreten program

Öğrenme Metodu

Tek bir profil kartı ekranı Container, Row ve Column ile adım adım kurulur; her hizalama kararının ekrandaki sonucu karşılaştırılır.

Neden Bu Eğitim?

🎯Sağlam yerleşim temeli

Kutu modelini ve hizalama mantığını kavrayarak her ekranı tahmin edilebilir ve düzenli biçimde kurma güveni kazanırsınız.

📐Kısıtları anlama

Flutter'ın yukarıdan kısıt aşağıdan boyut mantığını öğrenerek beklenmedik taşma ve bozulma hatalarını kolayca çözersiniz.

🧩Tasarımdan koda geçiş

Bir taslağı Row, Column ve içerik widget'larıyla doğru parçalara ayırarak tasarımı koda hızlı ve temiz aktarırsınız.

Anahtar Konular

flutter layout eğitimiflutter temel yerleşimflutter row columnflutter container kursuflutter arayüz tasarımıflutter başlangıç eğitimiflutter mobil uygulama eğitimidart flutter kursuflutter constraintsflutter widget yerleşim
“Flutter'da yerleşim sihir değildir; yukarıdan gelen kısıtı ve aşağıdan dönen boyutu anlayan herkes ekranı istediği gibi kurar.”

Ön Koşullar

Eğitime başlamadan önce faydalı olacak bilgi ve kurulum

1
Dart temeli

Değişken, fonksiyon ve sınıf gibi temel Dart kavramlarına aşinalık yerleşim kodunu okumayı kolaylaştırır.

2
Widget kavramı

Her şeyin widget olduğu fikrini ve basit bir widget'ın ekranda göründüğünü bilmek faydalı olur.

3
Çalışan Flutter kurulumu

Flutter SDK kurulu, bir emülatör veya gerçek cihazla hot reload yapabilir durumda olmalıdır.

4
Temel araç kullanımı

Bir kod düzenleyicide dosya açıp çalıştırabilmek ve hot reload tetikleyebilmek yeterlidir.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı Container ve kutu modeliyle boyut ve boşluğu kavrar, Row ve Column ile öğeleri dizer ve mainAxis ile crossAxis hizalamanın sonucunu görür.
Modül 1
Container ve Kutu Modeli
  • Container ile boyut, renk ve içerik sarma
  • width ve height ile sabit boyut verme
  • decoration ile arka plan, kenarlık ve köşe
  • alignment ile içeriği kutu içinde hizalama
  • constraints ile en küçük ve en büyük boyut
  • Container'ın ne zaman gereksiz olduğu
Modül 2
Padding, Margin ve Boşluk
  • padding ile öğenin iç boşluğunu bırakma
  • margin ile dış boşluk ile öğeyi ayırma
  • EdgeInsets.all ve symmetric kullanımı
  • EdgeInsets.only ile tek yöne boşluk
  • İç ve dış boşluk arasındaki fark
  • Padding widget'ı ile Container padding farkı
Modül 3
Row ve Column ile Dizilim
  • Column ile öğeleri dikey eksende dizme
  • Row ile öğeleri yatay eksende dizme
  • children listesiyle çocukları sıralama
  • Row ve Column'u iç içe kullanma
  • Ana eksen ve karşı eksen kavramı
  • Satır ve sütun seçiminin yerleşime etkisi
Modül 4
MainAxis ve CrossAxis Hizalama
  • mainAxisAlignment ile ana eksende dağıtım
  • spaceBetween, spaceAround ve center farkı
  • crossAxisAlignment ile karşı eksende hizalama
  • mainAxisSize ile alanı kaplama kararı
  • Dikey ve yatayda hizalamanın yer değiştirmesi
  • Hizalama ile boşluk dağıtımını birleştirme
Günün hedefiKatılımcı Expanded ve Flexible ile boş alanı oransal paylaşır, BoxConstraints ile kısıt modelini kavrar, SizedBox ile boşluk verir ve taşma hatalarını çözer.
Modül 1
Expanded ve Flexible
  • Expanded ile kalan alanı doldurma
  • flex ile alanı oranlı paylaştırma
  • Flexible ile içeriğe göre esneme
  • tight ve loose uyum (fit) farkı
  • İki öğe arasında alanı bölüştürme
  • Row içinde metnin taşmadan sığması
Modül 2
BoxConstraints ve Kısıt Modeli
  • Yukarıdan kısıt, aşağıdan boyut akışı
  • minWidth, maxWidth ve sıkı kısıt kavramı
  • ConstrainedBox ile boyut sınırı koyma
  • LayoutBuilder ile gelen kısıtı okuma
  • Sonsuz yükseklikte Column sorununu anlama
  • UnconstrainedBox ile kısıttan çıkma durumu
Modül 3
SizedBox ve Spacer
  • SizedBox ile sabit boşluk bırakma
  • SizedBox.shrink ile öğeyi gizleme
  • Spacer ile esnek boşluk ekleme
  • SizedBox ile bir widget'a boyut dayatma
  • Boşluk için Padding yerine SizedBox seçimi
  • fillMaxWidth için double.infinity kullanımı
Modül 4
Taşma ve Çözümleri
  • Sarı siyah taşma uyarısının anlamı
  • Row taşmasını Expanded ile çözme
  • Metin taşmasını Flexible ile sarmalama
  • overflow ve TextOverflow.ellipsis kullanımı
  • SingleChildScrollView ile içeriği kaydırma
  • FittedBox ile içeriği alana sığdırma
Günün hedefiKatılımcı Text, Image ve Icon ile içerik yerleştirir, Card ve ListTile ile hazır bileşenleri kullanır ve öğrendiği yerleşimi tek bir profil ekranında birleştirir.
Modül 1
Text ve Metin Stili
  • Text ile ekrana yazı yerleştirme
  • TextStyle ile boyut, renk ve kalınlık
  • textAlign ile hizalama ve maxLines
  • Tema üzerinden tutarlı tipografi kullanma
  • RichText ile tek satırda karışık stil
  • overflow ile uzun metni kısaltma
Modül 2
Image ve Icon Kullanımı
  • Image.asset ile yerel görsel gösterme
  • Image.network ile uzaktan görsel yükleme
  • BoxFit ile görseli alana oturtma
  • CircleAvatar ile yuvarlak profil görseli
  • Icon ve Material ikon kullanımı
  • errorBuilder ile görsel yüklenmeyince yedek
Modül 3
Card, ListTile ve Decoration
  • Card ile gölgeli ve köşeli içerik kutusu
  • ListTile ile başlık, alt başlık ve ikon
  • BoxDecoration ile gradyan ve gölge
  • ClipRRect ile köşeleri yuvarlama
  • Divider ile öğeler arası ayraç
  • InkWell ile dokunmada dalga etkisi
Modül 4
Temel Ekranı Birleştirme
  • Profil ekranını parçalara ayırarak planlama
  • Üst başlık, avatar ve bilgi bölümü kurma
  • Row ve Column ile bölümleri yerleştirme
  • Expanded ve SizedBox ile boşlukları ayarlama
  • Küçük widget'lara bölerek kodu okunur tutma
  • Ekranı farklı boyutlarda gözden geçirme

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
Kutu modeline hâkimiyet

Container, padding ve margin ilişkisini kavrayarak boyut ve boşluğu bilinçli biçimde denetleyebilirsiniz.

✅
Row ve Column kullanımı

Öğeleri yatay ve dikey dizerek ve iç içe kullanarak istediğiniz dizilimi güvenle kurabilirsiniz.

✅
Hizalama denetimi

mainAxisAlignment ve crossAxisAlignment ile öğeleri her iki eksende doğru konumlandırabilirsiniz.

✅
Esnek alan paylaşımı

Expanded, Flexible ve Spacer ile boş alanı oranlı paylaşarak farklı ekranlara uyan düzenler kurarsınız.

✅
Kısıt modelini kavrama

Yukarıdan kısıt aşağıdan boyut akışını anlayarak sonsuz yükseklik ve taşma sorunlarını çözebilirsiniz.

✅
Taşma hatalarını giderme

Taşma uyarısının kaynağını bulur ve Expanded, ellipsis veya kaydırma ile pürüzsüz biçimde çözersiniz.

✅
İçerik widget'ları

Text, Image, Icon, Card ve ListTile ile zengin ve okunur içerik bölümlerini hızlıca yerleştirebilirsiniz.

✅
Ekranı birleştirme

Öğrendiğiniz yerleşim parçalarını tek bir profil ekranında düzenli ve bakımı kolay biçimde birleştirirsiniz.

Kimler İçin Uygundur?

  • Flutter'a yeni başlayan ve arayüz yerleşiminin mantığını sağlam öğrenmek isteyen geliştiriciler
  • tasarımı koda doğru aktarmak isteyen yazılımcılar
  • Dart'a aşina bilgisayar bölümü öğrencileri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?
Flutter'a yeni başlayan ve arayüz yerleşiminin mantığını sağlam öğrenmek isteyen geliştiriciler, tasarımı koda doğru aktarmak isteyen yazılımcılar ve Dart'a aşina öğrenciler için uygundur. Temel Dart ve widget bilgisi yeterlidir.
Flutter'ın kısıt modeli neden önemli?
Flutter yerleşimi yukarıdan aşağıya kısıt, aşağıdan yukarıya boyut mantığıyla çalışır. Bu akışı anlamak, sonsuz yükseklikte Column ve Row taşması gibi en sık hataların kaynağını görmeyi sağlar. İkinci gün BoxConstraints ve LayoutBuilder ile bu mantık uygulamalı işlenir.
Eğitimin süresi ve formatı nedir?
Eğitim üç gün sürer ve her gün dört modülden oluşur. Tek bir profil ekranı adım adım kurularak her yerleşim kararının görsel sonucu gösterilir. Yüz yüze veya online yapılabilir ve kurumun ihtiyacına göre uyarlanabilir.
Taşma (overflow) hataları çözülüyor mu?
Evet. İkinci gün sarı siyah taşma uyarısının kaynağı anlatılır; Row taşması Expanded ile, metin taşması Flexible ve TextOverflow.ellipsis ile, uzun içerik ise SingleChildScrollView ve FittedBox ile çözülerek uygulamalı gösterilir.
Eğitim sonunda sertifika veriliyor mu?
Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika tamamlanan modülleri ve kurulan profil ekranı örneğini belgeler; kurumsal gruplara özel uyarlama yapılabilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika d Digital Vizyon AKADEMİ KATILIM SERTİFİKASI Bu sertifika [Katılımcı Adı Soyadı] adlı katılımcının aşağıdaki eğitim programını başarıyla tamamladığını belgeler. Layouts in Flutter: Implementing Basic Flutter Layouts Eğiti Sertifika Kodu DV-2026XX00 Tarih 15.10.2026 Yetkili İmza DV AKADEMİ

Eğitim Bilgileri

Süre3 gün
SeviyeTemel Seviye
FormatOnline / Yüz Yüze / Hibrit
Sertifika✓ Var
Hemen Bilgi Al
İlgili Eğitimler

Bu Eğitimle Birlikte Tercih Edilenler

Flutter ve DartFlutter and Backends: Persisting Data on the Local Device Eğitimi
Mobil Uygulama Geliştirme Eğitimleri

Flutter and Backends: Persisting Data on the Local Device Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

Flutter uygulamanızda veriyi cihazda saklayın. shared_preferences, sqflite ve Hive ile yerel kalıcı veri saklamayı uygulamalı olarak öğrenin.

Detayları Gör →
Flutter ve DartFlutter Development: Getting Set Up with Flutter for Application Development Eğitimi
Mobil Uygulama Geliştirme Eğitimleri

Flutter Development: Getting Set Up with Flutter for Application Development Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

Flutter geliştirme ortamını sıfırdan kurun. SDK, flutter doctor, IDE, proje yapısı, DevTools ve derleme adımlarını uygulamalı olarak öğrenin.

Detayları Gör →
Flutter ve DartFlutter Development: Introducing Flutter & the Dart Programming Language Eğitimi
Mobil Uygulama Geliştirme Eğitimleri

Flutter Development: Introducing Flutter & the Dart Programming Language Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

Flutter mimarisini ve Dart programlama dilini temelden öğrenin. Widget, null safety, OOP ve asenkron konularıyla ilk uygulamaya kadar uygulamalı eğitim.

Detayları Gör →
Flutter ve DartFlutter Development: Using Classes & Objects in Dart Eğitimi
Mobil Uygulama Geliştirme Eğitimleri

Flutter Development: Using Classes & Objects in Dart Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

Dart'ta sınıflar, yapıcılar, kalıtım, mixin, generics ve değişmez modellerle nesne yönelimli programlamayı Flutter odağında öğreten kurumsal eğitim.

Detayları Gör →
Flutter ve DartFlutter Development: Using Variables, Collections, & Functions in Dart Eğitimi
Mobil Uygulama Geliştirme Eğitimleri

Flutter Development: Using Variables, Collections, & Functions in Dart Eğitimi

4 günTemelOnline / Yüz Yüze / Hibrit

Dart'ta değişkenler, null güvenliği, List, Set, Map koleksiyonları ve fonksiyonlarla Flutter'a hazırlık sağlayan sıfırdan uygulamalı kurumsal eğitim.

Detayları Gör →
Flutter ve DartFlutter ile Android ve IOS Uygulama Geliştirme Eğitimi
Mobil Uygulama Geliştirme Eğitimleri

Flutter ile Android ve IOS Uygulama Geliştirme Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

Widget ağacı, durum yönetimi, navigasyon, Dio ile ağ istekleri ve mağaza yayınıyla Flutter'da Android ve iOS uygulama geliştirmeyi öğreten kurumsal eğitim.

Detayları Gör →
+90 (501) 369 40 14 WhatsApp [email protected] LinkedIn