Özet - Image'lar
- Flutter kursu
- Başlangıç
- Ders 80/99
- 4 dk
AssetImage ve Image.network'ü birleştirerek galeri yaparsın.
Özet - Image'lar
Image ailesi üç temel kaynaktan görsel yükler: AssetImage ile yerel asset'ler, Image.network ile URL'ler, Image.file ile cihaz dosyaları. fit parametresi (BoxFit) ile sığma davranışını kontrol edersin. Doğru kaynağı ve doğru fit değerini seçmek, hem performans hem görünüm açısından önemlidir.
Image.asset('assets/a.png', fit: BoxFit.cover)
Image.network('https://x.com/b.png')
Image.file(File('/tmp/c.png'))Uygulama İki görselli galeri satırı yap
Bir Row içinde hem Image.asset('assets/photo.jpg') hem Image.network('https://picsum.photos/200') göster; ikisine de fit: BoxFit.cover ver.
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(
// Bir Row içinde iki görsel göster, ikisine de cover ver
child: null,
),
),
);
}
}Örnek çözüm
import 'package:flutter/material.dart';
void main() {
print('gallery: 2 images');
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Row(
children: [
Image.asset(
'assets/photo.jpg',
fit: BoxFit.cover,
),
Image.network(
'https://picsum.photos/200',
fit: BoxFit.cover,
),
],
),
),
),
);
}
}Beklenen çıktı
gallery: 2 images
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Uzak sunucudaki bir görsel için hangi kurucu kullanılır?
- AssetImage
- Image.asset
- Image.network Doğru cevap
- Image.file
Açıklama: Uzak bir sunucudaki görsel için Image.network kullanılır; asset ve dosya cihazda ya da uygulamada olmalıdır.
2 Galeri görseline cover uygula
Image.network(
'https://picsum.photos/300',
fit: ____,
)Image.network(
'https://picsum.photos/300',
fit: BoxFit.cover,
)Açıklama: Galeri karesini doldurmak için BoxFit.cover kullanılır; contain boşluk bırakır.
3 Image ailesi özeti
| Kavram | Anlamı |
|---|---|
AssetImage |
Yerel asset görseli |
Image.network |
URL'den görsel |
Image.file |
Dosya sisteminden görsel |
BoxFit.cover |
Alanı doldurup kırpar |