AssetImage
- Flutter kursu
- Başlangıç
- Ders 76/99
- 4 dk
AssetImage ile yerel görselleri yüklemeyi öğrenirsin.
AssetImage nedir?
AssetImage, uygulamanın içine dahil ettiğin yerel görselleri yüklemek için kullanılan sınıftır. Görsel dosyaları projedeki assets/ klasörüne konur ve pubspec.yaml dosyasında tanımlanır. Görseli göstermek için AssetImage(...) ya da kısa yol olan Image.asset(...) kullanırsın.
Image(
image: AssetImage('assets/logo.png'),
)
// ya da kısa yol:
Image.asset('assets/logo.png')pubspec.yaml dosyasında assets tanımı
pubspec.yaml dosyasında flutter bölümü altında bir assets listesi eklersin. Klasör yolu yazarsan içindeki tüm dosyalar dahil edilir; tek tek dosya yolu da yazabilirsin. Değişiklikten sonra mutlaka hot restart yapmalısın; hot reload yetmez.
flutter:
uses-material-design: true
assets:
- assets/
- assets/icons/Uygulama AssetImage ile görsel göster
AssetImage kullanarak assets/logo.png görselini gösteren bir Image widget'ı döndür. Görseli Center içinde Scaffold body'sine yerleştir.
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(
child: // buraya yaz
,
),
),
);
}
}Örnek çözüm
import 'package:flutter/material.dart';
void main() {
print('AssetImage: assets/logo.png');
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Image(
image: AssetImage('assets/logo.png'),
),
),
),
);
}
}Beklenen çıktı
AssetImage: assets/logo.png
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Yerel bir görseli uygulamaya dahil etmenin ilk adımı nedir?
- Görseli lib klasörüne koymak
- Görseli assets klasörüne koyup pubspec.yaml dosyasında tanımlamak Doğru cevap
- Görseli internetten indirmek
- Görseli main.dart içine gömmek
Açıklama: AssetImage ile yüklenen görseller uygulama paketine dahil edilir; bunun için dosyayı assets klasörüne koyup pubspec.yaml dosyasında tanımlaman gerekir.
2 AssetImage ile görsel yükle
Image(
image: ____,
)Image(
image: AssetImage('assets/logo.png'),
)Açıklama: AssetImage, yerel assets yolundan görsel yükler; URL ya da dosya yolu almaz.
3 AssetImage parçaları
| Kavram | Anlamı |
|---|---|
assets/ klasörü |
Görsellerin saklandığı yer |
pubspec.yaml |
Asset yollarının tanımlandığı dosya |
Image.asset |
Kısa yol oluşturucu |
hot restart |
Asset değişikliklerinden sonra gerekli |