Özet - SizedBox ve Center

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.

Örnek çözümü göster

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'),
      ),
    ),
  )));
}

Kendini test et

Bir çocuğu hem sabit boyuta getirmek hem de ekranda ortalamak için hangi ikili kullanılır?
- SizedBox + Center
- Padding + margin
- Column + Row
- Text + Container
Cevabı göster

SizedBox + Center — SizedBox çocuğu sabit boyuta getirir, Center onu ekranda ortalar; ikisi birlikte sabit boyutlu ortalanmış kart yapar.

Çocuğu köşeye yerleştir

Align(
  alignment: ____,
  child: Text('Köşede'),
)

Cevabı göster

Align(
  alignment: Alignment.topLeft,
  child: Text('Köşede'),
)

SizedBox ve Center birleşimi

Sabit boyut

SizedBox ile
Ortalama

Center ile
Konumlama

Align ile
Ebeveyni doldurma

SizedBox.expand ile

Sıradaki ders: ListView nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler