Ahmet Balaman LogoAhmet Balaman

Flutter: Resim Eklemek - Assets ve Image.asset

personAhmet Balaman
calendar_today
FlutterAssetsImagepubspec.yamlResources

Flutter'da projenize resim eklemek için önce resimleri bir klasöre yerleştirmeniz ve ardından pubspec.yaml dosyasında bunları asset olarak tanımlamanız gerekir.

Adım 1: Resim Klasörü Oluşturma

Flutter projenizin kök dizininde (lib klasörü ile aynı seviyede) bir resim klasörü oluşturun:

my_flutter_app/
  ├── lib/
  ├── assets/
  │   └── images/
  │       ├── logo.png
  │       ├── profile.jpg
  │       └── banner.png
  ├── pubspec.yaml
  └── ...

Not: Klasör ismi genellikle assets, images veya assets/images şeklinde olur. İstediğiniz ismi verebilirsiniz.

Adım 2: pubspec.yaml Yapılandırması

pubspec.yaml dosyasını açın ve flutter: bölümünün altına assets tanımlamasını ekleyin:

Tek Bir Resim Ekleme

flutter:
  uses-material-design: true
  
  assets:
    - assets/images/logo.png

Tüm Klasörü Ekleme

flutter:
  uses-material-design: true
  
  assets:
    - assets/images/

Klasör yolu sonunda / işareti olursa, o klasördeki tüm dosyalar asset olarak eklenir (alt klasörler hariç).

Alt Klasörlerle Birlikte

flutter:
  assets:
    - assets/images/
    - assets/images/icons/
    - assets/images/backgrounds/

Örnek pubspec.yaml

name: my_app
description: My Flutter application.

environment:
  sdk: '>=3.0.0 <4.0.0'

dependencies:
  flutter:
    sdk: flutter

flutter:
  uses-material-design: true
  
  assets:
    - assets/images/
    - assets/icons/

Adım 3: Resimleri Kullanma

Image.asset Widget

Image.asset('assets/images/logo.png')

Boyutlandırma

Image.asset(
  'assets/images/logo.png',
  width: 200,
  height: 200,
)

BoxFit ile Sığdırma

Image.asset(
  'assets/images/banner.png',
  width: double.infinity,
  height: 200,
  fit: BoxFit.cover, // Alanı kapla
)

BoxFit değerleri:

  • cover: Alanı tamamen kaplar, kırpar
  • contain: Tamamı görünür, boşluk kalabilir
  • fill: Alanı doldurur, oran bozulabilir
  • fitWidth: Genişliğe göre sığdır
  • fitHeight: Yüksekliğe göre sığdır
  • none: Orijinal boyut
  • scaleDown: contain gibi ama küçültmez

Pratik Kullanım Örnekleri

Örnek 1: Logo Gösterme

class LogoWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Image.asset(
        'assets/images/logo.png',
        width: 150,
        height: 150,
      ),
    );
  }
}

Örnek 2: Profil Resmi

CircleAvatar(
  radius: 50,
  backgroundImage: AssetImage('assets/images/profile.jpg'),
)

Örnek 3: Banner Resmi

Container(
  width: double.infinity,
  height: 200,
  child: Image.asset(
    'assets/images/banner.png',
    fit: BoxFit.cover,
  ),
)

Örnek 4: Icon Resmi

Row(
  children: [
    Image.asset(
      'assets/images/icons/star.png',
      width: 24,
      height: 24,
    ),
    SizedBox(width: 8),
    Text('Favorilerim'),
  ],
)

Örnek 5: Arka Plan Resmi

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage('assets/images/background.jpg'),
      fit: BoxFit.cover,
    ),
  ),
  child: Center(
    child: Text(
      'Hoş Geldiniz',
      style: TextStyle(
        color: Colors.white,
        fontSize: 32,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
)

Çoklu Ekran Desteği için Resimler

Farklı ekran yoğunluklarına göre farklı çözünürlükte resimler kullanabilirsiniz:

Klasör Yapısı

assets/
  └── images/
      ├── logo.png          (1x - mdpi)
      ├── 1.5x/
      │   └── logo.png      (1.5x - hdpi)
      ├── 2.0x/
      │   └── logo.png      (2x - xhdpi)
      ├── 3.0x/
      │   └── logo.png      (3x - xxhdpi)
      └── 4.0x/
          └── logo.png      (4x - xxxhdpi)

pubspec.yaml

flutter:
  assets:
    - assets/images/logo.png

Not: 1.5x, 2.0x, 3.0x, 4.0x klasörlerini otomatik olarak algılar, ayrıca belirtmeye gerek yok.

Kullanımı

Image.asset('assets/images/logo.png')

Flutter otomatik olarak cihazın yoğunluğuna göre uygun resmi seçer.

Resim İsimlendirme Önerileri

Çözünürlükle ilgili isimlendirme:

logo_low.png        // Düşük çözünürlük
logo_medium.png     // Orta çözünürlük
logo_high.png       // Yüksek çözünürlük

veya boyut belirtme:

icon_24.png         // 24x24 piksel
icon_48.png         // 48x48 piksel
icon_96.png         // 96x96 piksel

Loading ve Error Handling

Loading Göstergesi

Image.asset(
  'assets/images/logo.png',
  frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
    if (wasSynchronouslyLoaded) {
      return child;
    }
    return AnimatedOpacity(
      opacity: frame == null ? 0 : 1,
      duration: Duration(milliseconds: 300),
      curve: Curves.easeOut,
      child: child,
    );
  },
)

Hata Durumu

Image.asset(
  'assets/images/logo.png',
  errorBuilder: (context, error, stackTrace) {
    return Container(
      color: Colors.grey[300],
      child: Center(
        child: Icon(Icons.error, color: Colors.red),
      ),
    );
  },
)

Image.network vs Image.asset

Image.asset (Yerel Resim)

Image.asset('assets/images/logo.png')
  • Projeye dahildir
  • İnternet gerektirmez
  • Hızlı yüklenir
  • Uygulama boyutunu artırır

Image.network (İnternetten Resim)

Image.network('https://example.com/image.png')
  • İnternetten indirilir
  • İnternet bağlantısı gerektirir
  • Yavaş olabilir
  • Uygulama boyutunu artırmaz
  • Cache yapılabilir

FadeInImage ile Smooth Loading

FadeInImage(
  placeholder: AssetImage('assets/images/placeholder.png'),
  image: NetworkImage('https://example.com/image.png'),
  fit: BoxFit.cover,
)

veya yerel resimler için:

FadeInImage(
  placeholder: AssetImage('assets/images/loading.gif'),
  image: AssetImage('assets/images/photo.jpg'),
)

SVG Resimler

SVG resimler için flutter_svg paketi gereklidir:

pubspec.yaml

dependencies:
  flutter_svg: ^2.0.0

Kullanımı

import 'package:flutter_svg/flutter_svg.dart';

SvgPicture.asset(
  'assets/images/logo.svg',
  width: 100,
  height: 100,
)

Cached Network Image

Network resimlerini cache'lemek için cached_network_image paketi:

pubspec.yaml

dependencies:
  cached_network_image: ^3.3.0

Kullanımı

import 'package:cached_network_image/cached_network_image.dart';

CachedNetworkImage(
  imageUrl: 'https://example.com/image.png',
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
)

Sık Yapılan Hatalar

1. pubspec.yaml Girintisi

# ❌ YANLIŞ
flutter:
uses-material-design: true
assets:
  - assets/images/

# ✅ DOĞRU
flutter:
  uses-material-design: true
  assets:
    - assets/images/

Girintiler önemlidir! 2 veya 4 boşluk kullanın.

2. Yol Hatası

// ❌ YANLIŞ
Image.asset('images/logo.png')  // 'assets/' eksik

// ✅ DOĞRU
Image.asset('assets/images/logo.png')

3. Dosya Adı Büyük/Küçük Harf

// logo.PNG vs logo.png
// Dosya sisteminiz case-sensitive olabilir

4. Hot Reload Sorunu

pubspec.yaml değişiklikleri için:

  • Hot reload yeterli değil
  • Hot restart yapın (🔄 butonu)
  • Veya uygulamayı tamamen durdurup başlatın

Özet

Flutter'da resim eklemek:

  1. Klasör oluştur: assets/images/
  2. Resimleri ekle: PNG, JPG, SVG, vb.
  3. pubspec.yaml'a tanımla:
    flutter:
  assets:
    - assets/images/
  4. Hot restart yap
  5. Kullan:
    Image.asset('assets/images/logo.png')

Öneriler:

  • Çoklu çözünürlük için 1.5x, 2.0x, 3.0x klasörleri oluşturun
  • Anlamlı dosya isimleri kullanın
  • Büyük resimleri optimize edin
  • SVG resimler için flutter_svg kullanın
  • Network resimleri için cached_network_image kullanın

Performans İpuçları:

  • Gereksiz büyük resimlerden kaçının
  • WebP formatı daha küçük dosya boyutu sağlar
  • Kullanılmayan resimleri kaldırın
  • Lazy loading uygulayın

Resimler, Flutter uygulamalarının görsel kimliğinin önemli bir parçasıdır. Doğru kullanıldığında uygulamanızı profesyonel ve çekici hale getirir!

arrow_backTüm Yazılar