Das Grundgerüst »Scaffold« verstehen und anwenden

Flutter ist ein leistungsstarkes Framework, mit dem du plattformübergreifende Apps entwickeln kannst. Eines der zentralen Elemente in Flutter ist das Scaffold-Widget. Wenn du dich schon einmal gefragt hast, wie du ein grundlegendes Layout für deine App erstellst, bist du hier genau richtig.

In diesem Beitrag erkläre ich dir, was Scaffold ist, welche Hauptbestandteile es hat und wie du es anwendest. Dazu gibt es ein praktisches Codebeispiel, das du direkt ausprobieren kannst.

Was ist Scaffold?

Scaffold ist ein Container-Widget in Flutter, das dir ein grundlegendes Layout bereitstellt, auf dem du deine App-Inhalte aufbauen kannst. Es stellt viele wichtige Strukturelemente bereit, wie zum Beispiel:

Eine App-Leiste (AppBar)
Einen Hauptbereich für Inhalte (Body)
Eine Navigationsleiste (BottomNavigationBar)
Ein schwebendes Aktions-Button (FloatingActionButton)

Mit Scaffold hast du also das perfekte Werkzeug, um schnell und effizient ein App-Layout zu erstellen.

Die wichtigsten Bestandteile von Scaffold

Hier sind die Schlüsselkomponenten von Scaffold, die du kennen solltest:

AppBar: Die obere Leiste deiner App

Die AppBar ist eine zentrale Komponente, die üblicherweise den Titel deiner Seite anzeigt und Platz für Aktionen wie Icons oder Menüs bietet.

appBar: AppBar(
  title: Text('Home'),
),

Body: Der Hauptinhalt deiner App

Der body-Parameter ist der Kernbereich deiner Seite, in dem du Widgets platzieren kannst. Hier passiert die Magie deiner App.

body: Center(
  child: Text('Willkommen in meiner App!'),
),

FloatingActionButton: Der schwebende Aktions-Button

Mit dem FloatingActionButton kannst du einen auffälligen Button platzieren, der eine zentrale Aktion deiner App ausführt.

floatingActionButton: FloatingActionButton(
  onPressed: () {
    print('Button gedrückt!');
  },
  child: Icon(Icons.add),
),

BottomNavigationBar: Die untere Navigationsleiste

Die BottomNavigationBar hilft dir dabei, zwischen verschiedenen Ansichten oder Seiten deiner App zu wechseln.

bottomNavigationBar: BottomNavigationBar(
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Einstellungen'),
  ],
),

Ein praktisches Beispiel: Eine einfache Home-Seite

Lass uns jetzt all diese Elemente in einem praktischen Beispiel kombinieren. Hier eine einfache Home-Seite mit Navigation zu einer zweiten Seite:

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => QuestionnaireScreen()),
            );
          },
          child: Text('Start Questionnaire'),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          print('Floating Action Button gedrückt!');
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

class QuestionnaireScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Questionnaire')),
      body: Center(
        child: Text('Hier könntest du deinen Fragebogen einbauen!'),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: HomeScreen(),
  ));
}

Tipps für den Einsatz von Scaffold

Plane deine Navigation

Scaffold funktioniert perfekt mit Flutters Navigator. Plane, wie du zwischen Seiten wechseln möchtest, und kombiniere Scaffold mit Widgets wie ElevatedButton oder Drawer.

Passe die AppBar an

Nutze die Flexibilität der AppBar. Du kannst Icons, Menüs oder sogar eigene Widgets einfügen, um sie an deine Bedürfnisse anzupassen.

Nutze Design-Richtlinien

Halte dich an Material Design-Richtlinien, um eine konsistente Benutzererfahrung zu bieten. Scaffold unterstützt dich dabei, das richtige Design einzuhalten.

dimotec GmbH