In diesem Kapitel werden wir eine Xylofon-App erstellen, mit der wir Töne abspielen können. Dabei werden wir uns ansehen, wie wir Flutter-Pakete verwenden können, um unsere Apps zu verbessern und mit mehr Funktionalität auszustatten, ohne Monate damit zu verbringen, all diese Features selbst zu programmieren.

Bandnamen Generator

Um erste Erfahrungen mit Flutter-Paketen zu sammeln, werden wir eine App zur Generierung von Bandnamen kreieren. Erstellen Sie dazu ein neues Flutter-Projekt. Ersetzen Sie anschliessend den gesamten Code aus der main.dart Datei mit dem folgenden Code:

                    
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Container(),
        ),
      ),
    );
  }
}

                

Als nächstes suchen wir auf https://pub.dev/flutter/packages nach einem Paket, das englische Wörter generiert. Die Suche resultiert in dem Paket names english_words.

Sobald man sich auf einem Paket befindet, mit dem man arbeiten möchten, ist es am einfachsten auf die Registerkarte “Installation” zu klicken um zu sehen, was die Entwickler:innen zur Installation dieses Pakets sagen.

Öffnen Sie in Ihrem Projekt in Visual Studio Code ein neues Terminal-Fenster (in der Menüleiste auf Terminal > New Terminal klicken) und geben Sie im Terminal den Befehl flutter pub add english_words ein und schicken diesen Befehl mit der Enter-Taste ab. Nach erfolgreicher Installation sollte im Terminal am Schluss der Text Changed 1 dependency! erscheinen.

Wenn Sie anschliessend in Ihre pubspec.yaml Datei wechseln, sollte unter dependencies der Eintrag english_words: ^4.0.0 erscheinen.

Wechseln Sie wieder in Ihre main.dart Datei und fügen Sie die drei Codezeilen import 'package:english_words/english_words.dart'; , final wordPair = WordPair.random();
und child: Center(child: Text(wordPair.asUpperCase)), an den richtigen Stellen ein.

                    
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Center(child: Text(wordPair.asUpperCase)),
        ),
      ),
    );
  }
}

                

Mit der Anweisung import 'package:english_words/english_words.dart'; teilen wir Flutter mit, dass wir in unserer App auf das english_words-Paket zugreifen möchten. Der Code final wordPair = WordPair.random(); dient zur Generierung einer zufälligen Sequenz von zwei Wörtern, welche in einer Variable mit dem Namen wordPair gespeichert werden. Über child: Center(child: Text(wordPair.asUpperCase)), wird ein child-Widget mit einem zentrierten Text-Widget erstellt, welches wiederum unsere Variable wordPair in Grossbuchstaben darstellt.  Sobald Sie diese Änderungen vorgenommen haben, können Sie die App ausführen. Mit jedem Hot-Reload wird ein neuer Bandname generiert.

Das war ein ziemlich simples Paket, um zu demonstrieren, wie sich ein Flutter-Paket in ein Projekt integrieren lässt. Es gibt z.B. auch Pakete, um In-App-Zahlungen zu ermöglichen oder auf Standortdaten zuzugreifen. Flutter-Pakete sind im Wesentlichen eine Menge Code, den jemand anderes geschrieben hat, um ein bestimmtes Ziel zu erreichen. Und weil die Entwickler:innen die ganze Zeit damit verbringen, diesen Code zu erstellen, laden sie es freundlicherweise auf die Website von Google hoch, um es mit der Welt zu teilen. Damit Sie oder ich, wenn Sie diese bestimmte Funktionalität benötigen, nicht die drei oder sechs Monate verbringen müssen, die gewünschte Funktionalität nachzubauen. In der nächsten Lektion werden wir uns ansehen, wie wir ein Audioplayer-Paket verwenden können, um unsere Xylofon-Sounds abzuspielen.