◈widgetustasıFLUTTER TASARIM ATÖLYESİ
● Tasarım oyunu
Tarayıcıya kaydedilir
HAYAL ET · YERLEŞTİR · DENE

Parçaları ekle. Uygulamanı oluştur.

Bir parça seç, tasarımına ekle. Sonucunu telefonda gör.

2. Tasarımını kur

02
Bir öğeye tıkla: metnini, rengini veya boyutunu değiştir.
Sürükle · Taşı · Düzenle

Özellikler

Seçileni sar

Keşif rozetleri

Tek bir doğru tasarım yok. Bu fikirleri kendi ekranında dene.

3. Telefonda dene

● CANLI
Telefondaki bir öğeye tıklayarak seçebilirsin.
Telefon boyutu

Açıklamaları göster
TASARIMINDAN KODA

Senin Flutter ekranın

Widget ağacının ürettiği Dart örneği. Bir Flutter projesinin main.dart dosyasına aktarabilirsin.

MediaQuery kartı bir boyut ifadesini temsil eder; kodda MediaQuery.sizeOf(context) ile SizedBox üretir. Bu editör, Flutter’ın tüm constraint ve metin ölçüm ayrıntılarını uygulamaz.


İLK TASARIMIN İÇİN
Bir fikirden uygulamaya.
  1. Yapıyı kur. Column ekle, içine Row bırak. Metin, ikon ve kutularla kendi ekranını oluştur.
  2. Özelleştir. Ağaçtan veya telefondan bir öğe seç. Rengini, boyutunu, metnini ve hizalamasını değiştir.
  3. Sar veya taşı. SafeArea’yı mevcut ağacın üstüne bırak. Bir öğeyi başka bir yuvaya sürükleyerek taşı. Aradaki çizgiler sıralamayı değiştirir.
  4. Ekranı zorla. Genişliği artırıp azalt. Sabit boyut aynı kalır; MediaQuery ile hesaplanan boyut ekranı izler. SafeArea olmadan içerik sistem çubukları altında kalabilir.
  5. Keşfet ve test et. Rozetleri aç, farklı ekranları test et ve üretilen Flutter kodunu incele.
Sürüklemek yerine: hedef öğeyi seç → widget kartına tıkla. Klavyeyle Tab ve Enter da kullanabilirsin.
MediaQuery tek başına her tasarımı uyumlu yapmaz. LayoutBuilder, kendisine verilen genişliğe göre Row / Column seçer. Expanded / Flexible doğrudan Row veya Column altında, Positioned doğrudan Stack altında kullanılmalıdır. Stack kırpılarak canlandırılır.
SafeArea ve MediaQuery belgeleri ↗