Özet - Padding ve margin

Padding ve margin'i birleştirerek nefes alan bir kart yaparsın.

Padding ve margin özeti

Padding widget'ı ve Container'ın padding parametresi, child ile kenar arasına iç boşluk koyar. Container'ın margin parametresi, Container ile dış widget'lar arasına dış boşluk koyar. EdgeInsets'in all, only ve symmetric kurucuları boşluk miktarını esnek biçimde tanımlar. Padding ve margin'i birlikte kullanarak, hem içeriği nefes alan hem de komşularından ayrılan kartlar oluşturursun.

Container(
  margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  padding: EdgeInsets.all(12),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(8),
  ),
  child: Text('Nefes alan kart'),
)

Uygulama Nefes alan kart yap ve çalıştır

Önce print('kart hazir') yazdır, sonra runApp(MaterialApp(home: Container(...))) çağrısı yap. Container'ın margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8), padding: EdgeInsets.all(12), decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(8)) ve child: Text('Nefes alan kart') olsun.

Örnek çözümü göster

import 'package:flutter/material.dart';

void main() {
  print('kart hazir');
  runApp(MaterialApp(home: Container(
    margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
    padding: EdgeInsets.all(12),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(8),
    ),
    child: Text('Nefes alan kart'),
  )));
}

Kendini test et

Bir kartın hem içeriği nefes alsın hem de komşu kartlardan ayrı dursun istiyorsan ne kullanırsın?
- Hem padding hem margin
- Yalnızca color
- Yalnızca padding
- Yalnızca margin
Cevabı göster

Hem padding hem margin — İç boşluk için padding, dış boşluk için margin birlikte kullanılarak kart hem nefes alır hem ayrı durur.

Boşluk nesnesini tanımla

padding: ____.all(16.0),

Cevabı göster

padding: EdgeInsets.all(16.0),

Padding ve margin birleşimi

Nefes alan kart

padding + margin ile
Dört kenar aynı boşluk

EdgeInsets.all ile
Yatay ve dikey ayrı

EdgeInsets.symmetric ile
Belirli kenar boşluğu

EdgeInsets.only ile

Sıradaki ders: SizedBox

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler