This is a test message to test the length of the message box.
Login
Flutter Alles ist ein Widget
Erstellt von Software-Heroes

Flutter - Alles ist ein Widget

Wirklich alles ist ein Widget in Flutter, das Grundprinzip werden wir in dem heutigen Artikel kurz erklären und dir an einem Beispiel zeigen.

Werbung

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.


Enthaltene Themen:
FlutterWidget
Kommentare (0)
Werbung

Flutter - #FlutterEngage

Kategorie - Flutter

Das FlutterEngage Event ist zu Ende und es gab wieder viele hilfreiche und interessante Informationen für alle Flutter Entwickler unter uns. Wir wollen hier kurz die wichtigsten Punkte zusammenfassen.

05.03.2021

Flutter - Lernquellen

Kategorie - Flutter

In diesem Artikel wollen wir dir einige aktuelle Lernquellen vorstellen, die du als Inspiration und zur Weiterbildung nutzen kannst. Hier werden wir vor allem auf YouTube Kanäle eingehen und einige vorstellen.

29.01.2021

Flutter - Webseiten

Kategorie - Flutter

Die Erstellung von Webseiten und PWAs ist bereit seit einer ganzen Weile in der Beta- Phase, heute zeigen wir dir ein kleines produktives Beispiel.

16.10.2020

Flutter Day 2020

Kategorie - Flutter

Die Flutter Days 2020 sind vorbei und wir fassen euch kurz das Wichtigste der Tage zusammen und stellen euch die Ressourcen zur Verfügung.

31.07.2020

Flutter - Spiele Entwicklung

Kategorie - Flutter

Flutter besitzt viele Vorteile für die schnelle Entwicklung von einfachen Apps, doch kann man mit dem Framework auch Spiele entwickeln?

22.05.2020

Wir verwenden Cookies für unsere Dienste und Funktionen. Mehr Informationen