Image.network
- Flutter kursu
- Başlangıç
- Ders 77/99
- 4 dk
Image.network ile uzak görselleri göstermeyi öğrenirsin.
Image.network nedir?
Image.network, bir URL'den uzak görsel yükleyen kurucudur. İnternet erişimi gerekir; görsel indirilip önbelleğe alınır. Uygulamaya ek dosya dahil etmeden, yalnızca URL dizesini parametre olarak alarak çalışır.
Image.network('https://example.com/photo.png')Yükleme ve hata durumu
Image.network varsayılan olarak loadingBuilder ve errorBuilder parametrelerini alır. loadingBuilder ile görsel indirilirken bir yükleniyor göstergesi, errorBuilder ile hata durumunda yedek içerik gösterebilirsin. Bu, yavaş bağlantılarda kullanıcı deneyimini iyileştirir.
Image.network(
'https://example.com/p.png',
loadingBuilder: (context, child, progress) {
return CircularProgressIndicator();
},
)Uygulama Image.network ile uzak görsel göster
Image.network ile https://picsum.photos/200 görselini gösteren bir widget döndür.
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(
// buraya Image.network ekle
child: null,
),
),
);
}
}Örnek çözüm
import 'package:flutter/material.dart';
void main() {
print('NetworkImage: https://picsum.photos/200');
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Image.network('https://picsum.photos/200'),
),
),
);
}
}Beklenen çıktı
NetworkImage: https://picsum.photos/200
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Image.network ne zaman tercih edilir?
- Görsel uygulama paketindeyken
- Görsel bayt dizisi olarak elindeyken
- Görsel cihazın dosya sistemindeyken
- Görsel bir internet adresindeyken Doğru cevap
Açıklama: Image.network bir URL'den görsel indirmek için kullanılır; asset ya da dosya yolu için uygun değildir.
2 Image.network kurucusuna URL ver
Image.network('____')Image.network('https://example.com/p.png')Açıklama: Image.network bir URL dizesi bekler; asset yolu ya da dosya yolu çalışmaz.
3 Image.network parçaları
| Kavram | Anlamı |
|---|---|
Image.network |
URL'den görsel yükler |
loadingBuilder |
İndirme sırasında görünüm |
errorBuilder |
Hata durumunda görünüm |
URL dizesi |
Tek zorunlu parametre |