fit ve boyut

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 kalabilir

Uygulama Image.network'e BoxFit.cover ver

Image.network ile https://picsum.photos/200 görselini göster ve fit parametresini BoxFit.cover yap.

Örnek çözümü göster

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

Kendini test et

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
Cevabı göster

Görseli en boy oranını koruyarak sığdırır, boşluk kalabilir — 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.

fit parametresine cover ver

Image.asset(
  'assets/p.png',
  fit: ____,
)

Cevabı göster

Image.asset(
  'assets/p.png',
  fit: BoxFit.cover,
)

BoxFit değerleri

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

Sıradaki ders: Özet - Image'lar

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler