Özet - SizedBox ve Center
- Flutter kursu
- Başlangıç
- Ders 45/99
- 4 dk
SizedBox ve Center'ı birleştirerek ekran ortası karşılama yaparsın.
SizedBox ve Center özeti
SizedBox, sabit boyutlu bir kutu veya boşluk aracıdır; width ve height ile kesin boyut verir, SizedBox.expand ile ebeveyni doldurur. Center, çocuğu ebeveynin tam ortasına koyar; Align ise çocuğu Alignment değerleriyle herhangi bir konuma yerleştirir. Bu widget'ları birleştirerek ekran ortasında sabit boyutlu bir karşılama kartı yapabilirsin.
Center(
child: SizedBox(
width: 200,
height: 100,
child: Container(
color: Colors.blue,
alignment: Alignment.center,
child: Text('Hoş geldin'),
),
),
)Uygulama Karşılama kartı yap ve çalıştır
Önce print('karsilama hazir') yazdır, sonra runApp(MaterialApp(home: Center(child: SizedBox(...)))) çağrısı yap. Center'ın çocuğu SizedBox(width: 200, height: 100) olsun, SizedBox'in çocuğu Container(color: Colors.blue, child: Text('Hos geldin')) olsun.
Başlangıç kodu
import 'package:flutter/material.dart';
void main() {
// 'karsilama hazir' mesajını print ile yazdır
// runApp ile MaterialApp çağır; home Center olsun
}
// Center: SizedBox child içersin
// SizedBox: width, height ve Container child olsun
// Container: color ve Text child olsunÖrnek çözüm
import 'package:flutter/material.dart';
void main() {
print('karsilama hazir');
runApp(MaterialApp(home: Center(
child: SizedBox(
width: 200,
height: 100,
child: Container(
color: Colors.blue,
child: Text('Hos geldin'),
),
),
)));
}Beklenen çıktı
karsilama hazir
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bir çocuğu hem sabit boyuta getirmek hem de ekranda ortalamak için hangi ikili kullanılır?
- SizedBox + Center Doğru cevap
- Padding + margin
- Column + Row
- Text + Container
Açıklama: SizedBox çocuğu sabit boyuta getirir, Center onu ekranda ortalar; ikisi birlikte sabit boyutlu ortalanmış kart yapar.
2 Çocuğu köşeye yerleştir
Align(
alignment: ____,
child: Text('Köşede'),
)Align(
alignment: Alignment.topLeft,
child: Text('Köşede'),
)Açıklama: Alignment.topLeft, çocuğu sol üst köşeye yerleştirir.
3 SizedBox ve Center birleşimi
| Kavram | Anlamı |
|---|---|
Sabit boyut |
SizedBox ile |
Ortalama |
Center ile |
Konumlama |
Align ile |
Ebeveyni doldurma |
SizedBox.expand ile |