Özet - Text ve Container
- Flutter kursu
- Başlangıç
- Ders 30/99
- 4 dk
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.
Başlangıç kodu
import 'package:flutter/material.dart';
void main() {
// 'kart hazir' mesajını print ile yazdır
// runApp ile MaterialApp çağır; home bir Container olsun
}
// Container: padding, decoration, child içersin
// decoration: BoxDecoration, borderRadius ve border ile
// child: Text widget'ı, fontSize ve fontWeight ileÖrnek çözüm
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),
),
)));
}Beklenen çıktı
kart hazir
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Container'a köşe yuvarlama eklemek için ne kullanılır?
- TextAlign ile Text
- EdgeInsets ile padding
- FontWeight ile TextStyle
- BorderRadius ile BoxDecoration Doğru cevap
Açıklama: Köşe yuvarlama, BoxDecoration'ın borderRadius parametresiyle eklenir.
2 Container'a süsleme ekle
Container(
____: BoxDecoration(
borderRadius: BorderRadius.circular(8),
),
child: Text('Kutu'),
)Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
),
child: Text('Kutu'),
)Açıklama: decoration parametresi Container'a BoxDecoration eklemek için kullanılır.
3 Text ve Container birleşimi
| Kavram | Anlamı |
|---|---|
Başlık kartı |
Text + Container + BoxDecoration |
Yazı biçimi |
TextStyle ile |
Kutu alan |
Container ile |
Köşe ve kenarlık |
BoxDecoration ile |