Was du über das Flutter Scaffold Widget wissen solltest

Du fängst an deine App zu programmieren, möchtest den ersten Text ausgeben und auf deinem Bildschirm erscheint der Text in rot und ist zudem noch in gelb unterstrichen? Zwei Fragen tauchen im Kopf auf:

1. Warum ist der Text so schön bunt und

2. Wie kann ich die gelbe Linie unter dem Text wieder verschwinden lassen?

Erscheint der Text so rot und gelb auf deiner App dann fehlt dir das Scaffold Widget oder ein anderer Material Container. Der Text wurde ohne Scaffold, also einfach direkt als Child in der MaterialApp, angegeben:

import 'package:flutter/material.dart';
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scaffold Demo',
      theme: ThemeData(),
      home: const Center(
        child: Text("Bunter Begrüßungstext")
      )
    );
  }
}
  

Scaffold ist das Top-Level Widget

Das Scaffold sollte immer zentral als Top-Level-Container einer MaterialApp implementiert sein, denn es ermöglicht dem Framework auf dem Material Design zu arbeiten. Das Scaffold sollte direkt im home Attribut des MaterialApp Widgets angegeben werden:

import 'package:flutter/material.dart';
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scaffold Demo',
      theme: ThemeData(),
      home: const Scaffold(
        body: Center(
          child: Text("Normaler Begrüßungstext")
        ),
      )
    );
  }
}
   

Gibt man das Scaffold ordentlich an, kommt die gewünschte Formatierung ohne die farblichen Elemente raus.

Tipp: Immer nur ein einziges zentrales Scaffold Widget auf höchster Ebene verwenden.

Man kann Scaffolds zwar ineinander schachteln aber das sollte man möglichst vermeiden.

API für weitere zentrale Widgets

Gleichzeitig hat man mit dem Scaffold den direkten Zugriff auf die APIs für einen Drawer, AppBar und BottomSheet.

So kann man seiner eigenen App schnell und ohne viel Aufwand den richtigen Rahmen geben. Ob man mit einer BottomNavigationBar oder einem Drawer arbeiten möchte — das Scaffold ist der Start dafür.

Tipp: Wenn über das Flutter Routing auf neue Screens navigiert empfiehlt es sich über ein erneutes verwenden eines weiteren Scaffolds nachzudenken.

Und hier noch der Vollständigkeit halber das Scaffold Widget Code-Beispiel:

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Scaffold Demo',
        theme: ThemeData(),
        home: Scaffold(
          appBar: AppBar(title: const Text('Scaffold Demo')),
          body: const Center(child: Text("Normaler Begrüßungstext")),
          drawer: const Drawer(
            child: Text('Drawer Content'),
          ),
          bottomNavigationBar: BottomNavigationBar(
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: 'Home',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.photo_camera),
                label: 'Camera',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.help),
                label: 'Help',
              ),
            ],
          ),
          floatingActionButton: FloatingActionButton(
              child: const Icon(Icons.add),
              onPressed: () {
                // action on button press
              }),
        ));
  }
}
  

Und natürlich kann der Code auch im Dartpad ausprobiert werden: Der ursprüngliche Artikel erschien bei Medium.