Assets in Flutter hinzufügen könnte so einfach sein. Ordner anlegen, die Dateien rein legen und gut ist, oder? Nun ja. Nicht ganz. In Flutter muss man beim Hinzufügen von Assets einige Dinge beachten. Hier zeige ich dir welche.
Ordnerstruktur anlegen
Wie du es vielleicht schon von anderen Frameworks gewohnt bist, möchte Flutter Dinge wie Bilder und andere verwendete Dateien in einem “assets” Folder im Stammverzeichnis des Projektes (also auf derselben Ebene wie die pubspec.yaml) haben.
Zwingend notwenig ist das nicht, aber manche IDEs (Entwicklungsumgebungen) stellen, wenn das der Fall ist, weitere Features zur Verfügung und es ist der allgemein bekannte Stil.
Des weiteren erwarten manche Packages wie z.B. Flame eben genau diese Struktur:
/assets/images und /assets/audio für jeweils die Flame.image() and Flame.audio() Methode.
Das sieht in etwa so aus:
Dateien deklarieren
Jetzt musst du nur noch die abgelegten Dateien als Assets deklarieren, da du sie sonst nicht nutzen kannst.
Dazu gehst du einfach in die pubspec.yaml und fügst unter assets: deinen Dateipfad hinzu:
flutter:
# Importing assets used here
assets:
- assets/images/dart_bird.png
- assets/images/dart_bird_reverse.png
- assets/audio/flap-1.ogg
- assets/audio/flap-2.ogg
- assets/audio/flap-3.ogg
- assets/audio/flap-4.ogg
- assets/audio/explosion.mp3
Ganze Ordner lassen sich auch hinzuzufügen mit z.B.:
flutter:
# Importing assets used here
assets:
- assets/images/
- assets/audio/
Hierbei ist es allerdings wichtig, dass der angehängte forward slash (/) nicht vergessen wird.
Die pubspec.yaml ist übrigens indentation-sensitive, was bedeutet, dass das ordentliche Einrücken des Geschriebenen wichtig ist!
Bild verwenden
Nun kannst du ohne Probleme auf die Bilder zugreifen (es funktionieren sogar gifs), hier ein Beispiel:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Ein Bild"),
),
body: Image.asset('assets/images/dart_bird.png'),
),
);
}
}
Dies sieht dann so aus:
Sound verwenden
Das Abspielen von Sounddateien wird momentan noch nicht von Haus aus unterstützt. Dafür gibt es aber ein leicht zu verwendendes Plugin. Dafür fügst du einfach in der pubspec.yaml das audioplayers Plugin hinzu:
dependencies:
flutter:
sdk: flutter
# Adds functionality to play sound files
audioplayers: ^0.19.0
(Es ist eine gute Angewohnheit zu kommentieren, wofür die imports genutzt werden. Bei Kotlin Fehler, die aktuelle Version von Kotlin verwenden)
Du kannst es nun abspielen, indem du innerhalb deines Widgets ein neues AudioCache Objekt deklarierst:
static AudioCache player = AudioCache();
Und dann das Abspielen innerhalb des Widgets auslöst:
player.play("audio/explosion.mp3")
Beispiel-App
Hier eine weitere kleine Beispiel-App. Diese setzt natürlich voraus, dass du eine audio Datei mit dem entsprechenden Namen im asset Ordner und in der pubspec.yaml deklariert hast:
import 'package:flutter/material.dart';
import 'package:audioplayers/audio_cache.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
static AudioCache player = AudioCache();
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Sound abspielen Beispiel"),
),
body: Center(
child: ElevatedButton(
child: Text('Abspielen'),
onPressed: () => {player.play("audio/explosion.mp3")},
),
)),
);
}
}
Die Beispiel-App sieht so aus:
Comments