Flutter für Anfänger - Was ist der Scaffold?

Falls du hier gelandet bist, beginnst du vermutlich erst mit der Entwicklung von App mithilfe von Flutter und Dart. Dir ist vermutlich auch schon aufgefallen, dass der Scaffold so gut wie überall in Flutter auftaucht. Natürlich hat dieser auch seine Da-Seinsberechtigung.

Was der Scaffold in Flutter ist, wofür dieser benötigt wird und warum du ihn unbedingt verwenden sollst, wirst du hier erfahren.

import 'package:flutter/material.dart';

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

class MichsterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Michster App"),
          centerTitle: false,
          backgroundColor: Colors.red,
        ),
        body: Center(
          child: Text("Hier steht was!"),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            print("Test");
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

Wie du siehst, ist ein Scaffold nichts anderes als ein weiteres Widget. Darauf baut auch das Konzept von Flutter auf.

Das Scaffold Widget hat die Besonderheiten, dass es die standart Strukturen einer Material App bereitstellt und auch visuell darstellt. Die AppBar und der FloatingActionButton sind hier nur ein paar Beispiele dafür.

Das Flutter Scaffold Widget

Das Scaffold Widget wird meistens in der "home" Eigentschaft eines MaterialApp Widgets verwendet.

Der Scaffold liefert Struktur und Design einer modernen Material-App.

Folgend Eigenschaften können verwendet werden:

• title: Text-Widget
• appBar: AppBar-Widget
• floatingActionButton: FloatingActionButton-Widget
• backgroundColor: Farbe
• body: Inhalt der Seite

Die Flutter AppBar

Die AppBar ist ein weiters Widget aus dem Flutter SDK. Es ist die Leiste am oberen Bildschrimrand, worüber meistens die Überschrift und Navigation stattfindet.

Als Eigenschaften gibt es Beispielsweise:

• backgroundColor: Farbe
• title: Text-Widget
• centertitle: true oder false

Der Flutter FloatingActionButton

Der standard Button innerhalb eines Scaffolds ist der floatingActionButton. Dieser kann natürlich jede x-beliebige Funktion enthalten, meistens wird dadurch aber ein Create-Event getriggert. Also ein bestimmer Datensatz wird durch einen Klick erstellt.

Auch der FloatingActionButton hat Eigenschaften:

• onPressed: erwartet einen anonyme Funktion
• color: Farbe
• child: Text, Icon,...