All 7 Flutter Material Design Components questions
More in Flutter Material Design Components
What is Material Design, and how does Flutter's built in Material widget library let you quickly build an app that follows Google's own well established design guidelines? What is the difference between ElevatedButton, TextButton, and OutlinedButton in Material Design, and how does each one's own distinct specific visual style typically indicate a genuinely different relative level of visual importance or emphasis? How do Card and ListTile work together as commonly used Material widgets specifically for displaying a clean, well structured, scrollable list of individual items, such as a list of orders or messages? How does Material 3, the considerably newer version of Google's Material Design system, differ meaningfully from the earlier Material 2 in terms of its own specific visual style and available components? How can you properly build a fully custom Material component by directly composing together several lower level Material building blocks, such as InkWell and Material, rather than simply relying entirely on a fully pre built higher level widget? How should a large team properly establish and consistently enforce their own genuinely specific Material Design component usage guidelines and conventions across a genuinely large, actively shared Flutter codebase?
Advertisement
Back to results for “Fundamentals”
Flutter › Flutter Material Design Components

What is the Scaffold widget in Flutter, and how does it provide the basic overall visual structure for a typical Material Design screen, including an app bar, a body area, and a floating action button?

Beginner

Answer

Scaffold provides the basic, genuinely foundational visual structure and general overall layout for a typical Material Design screen, offering dedicated properties for commonly needed structural elements including an appBar displayed prominently at the very top of the screen, a body area representing the actual main visible content area, a floatingActionButton for a prominent primary action, and a drawer for a slide out side navigation menu, and using Scaffold as your genuine screen's root widget ensures these various common structural elements are all consistently and correctly positioned exactly according to Material Design's own well established layout conventions.
Scaffold(
  appBar: AppBar(title: Text('Orders')),
  body: OrderList(),
  floatingActionButton: FloatingActionButton(onPressed: addOrder, child: Icon(Icons.add)),
)
Real-world example An orders management screen uses Scaffold to properly and consistently structure its app bar, its main scrollable order list, and a floating action button specifically for quickly adding a genuinely new order, all correctly positioned exactly according to standard, well established Material Design conventions.

Common follow-ups: What happens if you try to use certain Material widgets without wrapping them somewhere within a Scaffold?;How do you properly show a temporary snackbar message from within a screen that already uses a Scaffold?

Layout Widgets (Row Column Stack Container);Flutter Widgets Fundamentals (Stateless & Stateful)
All 7 Flutter Material Design Components questions