Flutter: Bilder einbinden – Assets und Image.asset

Bilder in Flutter einbinden

Um Bilder in Ihr Flutter-Projekt aufzunehmen, legen Sie sie zunächst in einem Ordner ab und definieren sie anschließend in der Datei pubspec.yaml als Assets.

Schritt 1: Bilderordner anlegen

Legen Sie im Wurzelverzeichnis Ihres Flutter-Projekts (auf derselben Ebene wie der Ordner lib) einen Bilderordner an:

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

Hinweis: Üblich sind die Ordnernamen assets, images oder assets/images. Sie können jedoch einen beliebigen Namen wählen.

Schritt 2: pubspec.yaml konfigurieren

Öffnen Sie die Datei pubspec.yaml und ergänzen Sie die Asset-Definition unter dem Abschnitt flutter::

Ein einzelnes Bild einbinden

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

Einen ganzen Ordner einbinden

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

Steht am Ende des Ordnerpfads ein /, werden alle Dateien dieses Ordners als Assets aufgenommen (Unterordner ausgenommen).

Beispiel für eine 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/

Schritt 3: Bilder verwenden

Das Widget Image.asset

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

Größe festlegen

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

Anpassen mit BoxFit

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

Werte für BoxFit:

• cover: Füllt die Fläche vollständig, schneidet ab
• contain: Das gesamte Bild ist sichtbar, es kann Freiraum bleiben
• fill: Füllt die Fläche, das Seitenverhältnis kann verzerrt werden
• fitWidth: An die Breite anpassen
• fitHeight: An die Höhe anpassen
• none: Originalgröße
• scaleDown: Wie contain, vergrößert aber nicht

Unterstützung mehrerer Bildschirmdichten

Für unterschiedliche Bildschirmdichten können Sie Bilder in verschiedenen Auflösungen bereitstellen:

Ordnerstruktur

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

Hinweis: Die Ordner 1.5x, 2.0x, 3.0x und 4.0x werden automatisch erkannt und müssen nicht einzeln angegeben werden.

Verwendung

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

Flutter wählt anhand der Gerätedichte automatisch das passende Bild aus.

Häufige Fehler

1. Einrückung in der pubspec.yaml

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

# ✅ CORRECT
flutter:
  uses-material-design: true
  assets:
    - assets/images/

Die Einrückung ist entscheidend! Verwenden Sie 2 oder 4 Leerzeichen.

2. Falscher Pfad

// ❌ WRONG
Image.asset('images/logo.png')  // Missing 'assets/'

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

3. Problem mit Hot Reload

Bei Änderungen an der pubspec.yaml gilt:

• Hot Reload genügt nicht
• Führen Sie einen Hot Restart aus (Schaltfläche 🔄)
• Oder beenden und starten Sie die App vollständig neu

Zusammenfassung

Bilder in Flutter einbinden:

1. Ordner anlegen: assets/images/
2. Bilder ablegen: PNG, JPG, SVG usw.
3. In der pubspec.yaml definieren:

   flutter:
     assets:
       - assets/images/

4. Hot Restart ausführen
5. Verwenden:

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

Empfehlungen:

• Legen Sie für mehrere Auflösungen die Ordner 1.5x, 2.0x und 3.0x an
• Verwenden Sie sprechende Dateinamen
• Optimieren Sie große Bilder
• Nutzen Sie flutter_svg für SVG-Grafiken
• Nutzen Sie cached_network_image für Bilder aus dem Netz

Bilder sind ein wichtiger Teil der visuellen Identität von Flutter-Apps. Richtig eingesetzt wirkt Ihre App professionell und ansprechend!