Flutter
Özet - Text ve Container
Text, Container ve BoxDecoration'ı birleştirerek başlık kartı yaparsın.
Text ve Container özeti
Text widget'ı ekrana metin yazar; TextStyle ile boyut, renk ve kalınlık ayarlanır. Container, içine child alan ve padding/margin/decoration ile biçimlendirilen kutudur. BoxDecoration, köşe yuvarlama ve kenarlık ekler. Bu üçünü birleştirerek başlık kartı, bilgi kutusu veya etiket yapabilirsin.
Container(
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.blue, width: 2),
),
child: Text(
'Başlık',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
)
Uygulama Başlık kartı yap ve çalıştır
Önce print('kart hazir') yazdır, sonra runApp(MaterialApp(home: Container(...))) çağrısı yap. Container'ın padding: EdgeInsets.all(16.0), decoration parametresinde BoxDecoration (içinde borderRadius: BorderRadius.circular(12) ve border: Border.all(color: Colors.blue, width: 2)) ve child olarak Text('Baslik', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)) olsun.
Örnek çözümü göster
import 'package:flutter/material.dart';
void main() {
print('kart hazir');
runApp(MaterialApp(home: Container(
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.blue, width: 2),
),
child: Text(
'Baslik',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
)));
}
Kendini test et
-
Container'a köşe yuvarlama eklemek için ne kullanılır?
- TextAlign ile Text
- EdgeInsets ile padding
- FontWeight ile TextStyle
- BorderRadius ile BoxDecoration
Cevabı göster
BorderRadius ile BoxDecoration — Köşe yuvarlama, BoxDecoration'ın borderRadius parametresiyle eklenir.
-
Container'a süsleme ekle
Container(
____: BoxDecoration(
borderRadius: BorderRadius.circular(8),
),
child: Text('Kutu'),
)
Cevabı göster
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
),
child: Text('Kutu'),
)
-
Text ve Container birleşimi
- Başlık kartı
- Text + Container + BoxDecoration
- Yazı biçimi
- TextStyle ile
- Kutu alan
- Container ile
- Köşe ve kenarlık
- BoxDecoration ile
Sıradaki ders: Column
