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:
- Warum ist der Text so schön bunt und
- 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:
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:
Gibt man das Scaffold ordentlich an kommt die gewünscht 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:
Und natürlich kann der Code auch im Dartpad ausprobiert werden:
Für weitere Infos rund um Flutter folge mir gerne auf Twitter: https://twitter.com/_mkuehle
