Das Scaffold-Widget in Flutter ist viel mehr als nur ein Grundgerüst. Es bietet eine Vielzahl an erweiterten Features, die deine App auf ein neues Niveau heben können. In diesem Beitrag schauen wir uns an, was alles in ein Scaffold integriert werden kann, und wie du die volle Power dieses Widgets ausschöpfst.

Was kann alles zu einem Scaffold hinzugefügt werden?

Hier ist eine Übersicht über die möglichen Bestandteile, die du in ein Scaffold-Widget integrieren kannst:

1. AppBar

Eine obere Leiste, die öffentlich bekannte Aktionen, Titel oder Navigations-Buttons enthält.

• Titel (Text oder Widgets)
• Aktions-Icons
• Suchleiste
• Benutzerdefinierte Widgets

Beispiel:

appBar: AppBar(
  title: Text('Advanced Scaffold'),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {},
    ),
  ],
),

2. Body

Der Hauptinhalt deiner App. Hier kannst du jegliche Widgets einbauen.

• Listen
• Karten
• Rasterlayouts
• Benutzerdefinierte Widgets

Beispiel:

body: ListView(
  children: [
    ListTile(
      title: Text('Eintrag 1'),
      onTap: () {},
    ),
    ListTile(
      title: Text('Eintrag 2'),
      onTap: () {},
    ),
  ],
),

3. FloatingActionButton

Ein schwebender Aktions-Button, der oft für zentrale Aktionen wie «Hinzufügen» verwendet wird.

Beispiel:

floatingActionButton: FloatingActionButton(
  onPressed: () {},
  child: Icon(Icons.add),
),

4. FloatingActionButtonLocation

Ermöglicht es dir, die Position des FloatingActionButton anzupassen.

Beispiel:

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

5. BottomNavigationBar

Eine Navigationsleiste am unteren Rand, um zwischen verschiedenen Seiten zu wechseln.

Beispiel:

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

6. Drawer

Ein Seitenmenü, das oft für App-Navigation verwendet wird.

Beispiel:

drawer: Drawer(
  child: ListView(
    children: [
      DrawerHeader(
        decoration: BoxDecoration(color: Colors.blue),
        child: Text('Menü'),
      ),
      ListTile(
        title: Text('Home'),
        onTap: () {},
      ),
    ],
  ),
),

7. EndDrawer

Ein Menü auf der rechten Seite (anstatt links).

Beispiel:

endDrawer: Drawer(
  child: Text('Rechtes Menü'),
),

8. BottomSheet

Ein temporäres Overlay am unteren Bildschirmrand.

Beispiel:

showBottomSheet(
  context: context,
  builder: (context) {
    return Container(
      height: 200,
      color: Colors.grey[200],
      child: Center(
        child: Text('Bottom Sheet Inhalt'),
      ),
    );
  },
);

9. PersistentFooterButtons

Eine Reihe von Buttons, die am unteren Rand der Seite angezeigt werden.

Beispiel:

persistentFooterButtons: [
  ElevatedButton(
    onPressed: () {},
    child: Text('Speichern'),
  ),
  ElevatedButton(
    onPressed: () {},
    child: Text('Abbrechen'),
  ),
],

10. SnackBar

Ein kurzer Hinweis, der temporär am unteren Rand der Seite erscheint.

Beispiel:

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('Aktion ausgeführt!'),
  ),
);

11. BackgroundColor

Füge eine Hintergrundfarbe oder ein -bild hinzu.

Beispiel:

backgroundColor: Colors.grey[200],

12. ResizeToAvoidBottomInset

Steuert, ob sich das Layout automatisch anpasst, wenn die Bildschirmtastatur eingeblendet wird.

Beispiel:

resizeToAvoidBottomInset: true,

Fazit

Das Scaffold-Widget ist extrem flexibel und bietet dir alle Möglichkeiten, um eine professionelle Benutzeroberfläche zu gestalten. Indem du die verschiedenen Komponenten clever kombinierst, kannst du sowohl einfache Layouts als auch komplexe Designs erstellen. Probier die vorgestellten Elemente aus, und experimentiere mit verschiedenen Kombinationen, um das Beste aus deinem Scaffold herauszuholen!

Vollständiges Beispiel: Eine Advanced-Scaffold-App

Hier ist ein vollständiges Beispiel, das viele der vorgestellten Features kombiniert:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AdvancedScaffold(),
    );
  }
}

class AdvancedScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Advanced Scaffold'),
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Search action pressed!')),
              );
            },
          ),
        ],
      ),
      body: ListView(
        children: [
          ListTile(
            title: Text('Item 1'),
            onTap: () {},
          ),
          ListTile(
            title: Text('Item 2'),
            onTap: () {},
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text('Floating Action Button Pressed!')),
          );
        },
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
          ),
        ],
      ),
      drawer: Drawer(
        child: ListView(
          children: [
            DrawerHeader(
              decoration: BoxDecoration(color: Colors.blue),
              child: Text('Menu'),
            ),
            ListTile(
              title: Text('Home'),
              onTap: () {},
            ),
          ],
        ),
      ),
    );
  }
}