Flutter - Alles ist ein Widget

Alles ist ein Widget! Mit dieser Aussage kann man das Framework Flutter gut umschreiben. In dem Framework bestehen alle Elemente aus Widgets bzw. Objekten. Und selbst einfach zu scheinende Objekte bestehen wieder aus verschiedenen Grundelementen. In dem heutigen Artikel wollen wir uns das Thema mal etwas näher anschauen und dir die Funktionsweise des Frameworks etwas näher bringen.

Widgets

Alles ist ein Widget. Dies wollen wir dir am Beispiel der Card vorstellen. Dieses Widget besteht selbst aus unzähligen kleinen Widgets die Zusammenarbeiten. Jedes Widget ist ein Objekt und wird als Widget Tree aufgebaut, sodass man wie in der Web-Entwicklung einen Baum erhält über den man Suchen und Navigieren kann.

Schauen wir uns also einmal die Grundkomponenten des Card Widget an, wobei das Child Element das übergebene Element an Card darstellt. Den Überblick bekommt ihr in Android Studio über den Flutter Inspector:

• Semantics
• Container
• Padding
• Material
• _MaterialInterator
• PhysicalShape
• _ShapeBorderPainter
• CustomPaint
• NotificationListener
• _inkFeatures
• AnimatedDefaultTextStyle
• DefaultTextStyle
• Semantics
• Child

Auf den ersten Blick sieht man bereits die Komplexität von einfachen Widgets wie einer Karte. Im nächsten Abschnitt zeigen wir dir, wie man solche Widgets aber einfach verwenden kann.

App-Aufbau

Eine App besitzt ein so genanntes Root-Widget, dass die Basis der App bildet. Hier kannst du je nach Design auf die CuppertinoApp oder die MaterialApp zugreifen, je nachdem was für ein App Grunddesign du haben möchtest. In unseren Beispielen zeigen wir dir das Material Design, da unsere Apps auf diesem Design beruhen.

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Example',
      home: HomePage(),
    );
  }
}

Nach dem MaterialApp Widget benötigst du eine Seite, die die App anzeigt und als Hintergrund verwendet wird. In diesem Fall wird ein Scaffold eingebunden, dass erst einmal für eine leere Seite sorgt. Mit dem Parameter für Body, versorgen wir das leere Platt mit einem zentrierten Text.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Hello World'),
      ),
    );
  }
}

Um die App nun starten zu können, musst du nur noch die main Funktion ausführen und dein Root Widget übergeben, dann ist deine erste App laufbereit und kann weiter mit zusätzlichen Funktionen aufgebaut werden.

void main() => runApp(App());

Nach dem Starten des virtuellen Geräts bekommst du bereits das erste Ergebnis angezeigt: Eine leere Seite mit zentriertem Text:

Fazit

Wie du an dem Beispiel ganz leicht nachvollziehen kannst, besteht alles in Flutter aus verschiedenen kleinen Widgets die Zusammenarbeiten und so wie in der Webentwicklung einen Widget Tree bilden. In vielen Standard Widgets die wir zusammen verwenden werden, stecken zahlreiche kleinere Widgets. Und mit bereits wenig Aufwand und kleinen Widgets, bekommst du bereits deine erste App auf dem Bildschirm angezeigt.