5.4 Facelift der Xylofon-App und noch mehr Funktionen
Unsere App sieht aktuell so aus.
Wir besitzen sieben Tasten und alle können unterschiedliche Klänge abspielen. Aber im Moment sieht das Layout noch nicht so toll aus, oder? Das Layout der App nimmt nur einen kleinen Teil des Bildschirms ein und es sieht noch nicht wirklich nach einem Xylofon aus. In der nächsten Übung sollten Sie die Tasten so vergrössern, dass sie den ganzen Bildschirm ausfüllen. Dafür brauchen sie kein neues Wissen, denn wir haben all diese Funktionalität bereits kennengelernt, als wir die Layout-Widgets in der Visitenkarten-App besprochen haben.
Übung
Aktualisieren Sie die Benutzeroberfläche der Xylofon-App so, dass die Tasten den gesamten Bildschirm ausfüllen und der Bildschirmhintergrund schwarz ist. Tipp: Erweitern Sie ihr Column-Widget um eine crossAxisAlignment.stretch Eigenschaft und kopieren Sie jeweils die ganzen TextButton-Widgets in einzelne Expanded-Widgets. Die Hintergrundfarbe können Sie über das Attribut backgroundColor im Scaffold ändern.
Das Layout der App entspricht jetzt dem gewünschten Endprodukt, aber wenn wir uns unseren Programmcode genauer ansehen, können wir sehen, dass immer noch viele Zeilen an repetitivem Code vorhanden sind. Die Expanded-Widgets bestehen alle aus farbigen Tasten, welche bestimmte Klänge abspielen. Aber die Coderedundanz ist nicht toll, wenn wir an unseren Tasten etwas ändern wollen, da wir diese Änderung an jedem einzelnen unserer Tasten vornehmen müssten. Wie können wir also all diese Coderedundanz reduzieren? Sie erahnen die Antwort vielleicht schon: wir bauen uns wieder eine Funktion.
Xylofon-Tasten mit einer Funktion erzeugen
Für die Erstellung der Xylofon-Tasten erstellen wir die Funktion produceKey, welche als Parameter eine color vom Datentyp Color und ein audioSample vom Datentyp int nimmt. Das Schlüsselwort required bedeutet, dass bei einem Funktionsaufruf dieser Parameter zwingend als Argument übergeben werden muss. Der Datentyp der Funktion entspricht Expanded, da wir mit jedem Funktionsaufruf ein Expanded-Widget produzieren möchten, im Funktionskörper folgt nach return der gesamte Code, mit dem zuvor die Expanded-Widgets erzeugt worden sind.
import 'package:flutter/material.dart';
import 'package:just_audio/just_audio.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
void playSound(int audioSample) {
final AudioPlayer player = AudioPlayer();
player.setAsset('assets/note$audioSample.wav');
player.play();
}
Expanded produceKey({required Color color, required int audioSample}) {
return Expanded(
child: TextButton(
onPressed: () {
playSound(audioSample);
},
child: Text(''),
style: TextButton.styleFrom(backgroundColor: color),
),
);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
produceKey(color: Colors.red, audioSample: 1),
produceKey(color: Colors.orange, audioSample: 2),
produceKey(color: Colors.yellow, audioSample: 3),
produceKey(color: Colors.green, audioSample: 4),
produceKey(color: Colors.teal, audioSample: 5),
produceKey(color: Colors.blue, audioSample: 6),
produceKey(color: Colors.purple, audioSample: 7),
],
),
),
),
);
}
}
Durch diese Anpassungen konnten wir die Menge an Code, die zum Erstellen unserer Xylofon-App erforderlich ist, drastisch reduzieren. Mit Hilfe der produceKey Funktion lassen sich bequem über Funktionsaufrufe Tasten erzeugen. Und dank den beiden Inputparameter color und audioSample lassen sich die Farbe und der Klang jeder Taste individuell anpassen.