fit ve boyut
- Flutter kursu
- Başlangıç
- Ders 79/99
- 4 dk
BoxFit ile görselin sığma davranışını öğrenirsin.
BoxFit nedir?
BoxFit, bir görselin kendisine ayrılan alana nasıl sığacağını belirleyen numaralandırıcıdır. Image widget'ının fit parametresi ile verilir. En sık kullanılan değerler cover, contain ve fill'dir; her biri farklı bir sığma davranışı sergiler.
Image.asset(
'assets/p.png',
fit: BoxFit.cover,
)cover, fill ve diğer değerler
BoxFit.cover görseli en boy oranını koruyarak alana tamamen doldurur; taşan kısımlar kırpılır. BoxFit.fill ise alanı doldurmak için en boy oranını bozabilir. Diğer değerler arasında fitWidth, fitHeight, none ve scaleDown bulunur.
BoxFit.cover // oran korunur, taşan kısım kırpılır
BoxFit.fill // alan dolar, oran bozulabilir
BoxFit.contain // tüm görsel görünür, boşluk kalabilirUygulama Image.network'e BoxFit.cover ver
Image.network ile https://picsum.photos/200 görselini göster ve fit parametresini BoxFit.cover yap.
Başlangıç kodu
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
// Image.network ile görsel göster, fit parametresini cover yap
child: null,
),
),
);
}
}Örnek çözüm
import 'package:flutter/material.dart';
void main() {
print('BoxFit.cover');
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Image.network(
'https://picsum.photos/200',
fit: BoxFit.cover,
),
),
),
);
}
}Beklenen çıktı
BoxFit.cover
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 BoxFit.contain ne yapar?
- Görseli yalnızca genişletir
- Görseli en boy oranını bozarak alana yayar
- Görseli kırparak alana doldurur
- Görseli en boy oranını koruyarak sığdırır, boşluk kalabilir Doğru cevap
Açıklama: BoxFit.contain görselin tümünü orantılı olarak gösterir; alan dolmazsa boşluk kalır. Kırpmak için cover kullanılır.
2 fit parametresine cover ver
Image.asset(
'assets/p.png',
fit: ____,
)Image.asset(
'assets/p.png',
fit: BoxFit.cover,
)Açıklama: cover, görseli alana tamamen doldurup taşanı kırpar; contain boşluk bırakır.
3 BoxFit değerleri
| Kavram | Anlamı |
|---|---|
BoxFit.cover |
Oranı korur, taşanı kırpar |
BoxFit.contain |
Tüm görsel görünür, boşluk kalır |
BoxFit.fill |
Oranı bozup alana yayar |
BoxFit.scaleDown |
Küçültür ama büyütmez |