What is the difference between Scaffold and Container in Flutter?

Question

I know both Scaffold and Container are parent widgets in Flutter, but when should I use a Scaffold and when should I use a Container to layout my child widget?

Answer 1

Scaffold and container serve different purposes for layout and design.

Scaffold

• Implements the basic material design visual layout structure.
• This class provides APIs for showing drawers, snack bars, and bottom sheets.

Link - Scaffold

Container

• A convenience widget that combines common painting, positioning, and sizing widgets.
• It basically contains different widget into one widget over which you can give padding , size , position etc.

Link -Container

Conclusion

You need Scaffold widget as main parent of your page where you use container for smaller widget into page to give them different properties like size, border, padding, margin etc.

Answer 2

I would recommend you should understand MaterialApp Widget for a better understanding of Material Widgets like Scaffold and Container.

Scaffold:

The scaffold is the MaterialApp Widget which gives us pre-defined properties like AppBar, Body, Bottom Navigation, Floating Action & Persistent Footer. The scaffold will give Material look and feel in Screen.

Ideally, in MaterialApp every page/Screen will consist of the parent widget as a scaffold. If we don't give Scaffold as a parent widget there will be no material look and feel in Material App.

Helpful link for Scaffold Widget:

Scaffold Class: https://api.flutter.dev/flutter/material/Scaffold-class.html

App Samples: https://flutter.dev/docs/catalog/samples/Scaffold

Container:

The container is a basic/common widget in Flutter which will contain other widgets. Container widget used for decorating its child widget. we can give properties like borders, padding, alignment, height, width, etc. The container class will only contain one child widget.

Helpful link for Container Widget:

Container Class: https://api.flutter.dev/flutter/widgets/Container-class.html

Answer 3

Scaffold is like a parent widget or just consider a whole where you would have different properties like appbar,body all those type widgets are child widget scaffold gives better look to app where only using container is much uglier

Scaffold:

The scaffold has AppBar, Body, Bottom Navigation, Floating Action & Persistent Footer. The scaffold will give Material look and feel in Screen.

Container:

The container is a basic/common widget in Flutter which will contain other widgets. we can give padding , size , position etc.

Answer 4

The Scaffold instantiates our main structure, usually whatever is consistent across our app like our appbar or navigation, then we’ll set our body to the more interesting part of our app, abstracting it out of runApp will also allow us to use hot reload.

Like with HTML div’s, we can wrap our containers to give us more control over our elements when we can’t manipulate them themselves, since not every widget has properties like width or padding. Containers have some of the same properties from CSS like height, width, padding, and margin. By default, they will take up the maximum space of their children, empty containers try to take up the maximum amount of space of their parent.

Answer 5

The Scaffold is a layout structure of an Activity/UIView/Screen. Let say, an application has a general screen flow like, appbar, layouts, bottomnavigation bar, drawer, floating action button and many more views whether it is android/ios platform app.

The Scaffold will give you a default struture properties like appbar, body, floatingaction button, drawer and many more to reduce your headache for creating a new custom structure yourself for your app activity/screen/page/UIView.

While Container is a flexible widget with common properties any view will need. You can also create any kind of custom widgets with the help of the container widget using your own logic and work around.

I think Container is most compatible widget which can work around with almost each and every widget.

Answer 6

Container =>

container class contain only one child widget in container class we can decorate our widget by using some properties like: height, width, padding, color, alignment etc.

Answer 7

From wikipedia, Scaffolding means:

Scaffolding, also called scaffold or staging, is a temporary structure used to support a work crew and materials to aid in the construction, maintenance and repair of buildings, bridges and all other man made structures. Scaffolds are widely used on site to get access to heights and areas that would be otherwise hard to get to. Unsafe scaffolding has the potential to result in death or serious injury. Scaffolding is also used in adapted forms for formwork and shoring, grandstand seating, concert stages, access/viewing towers, exhibition stands, ski ramps, half pipes and art projects.

In Flutter, you're Scaffolding/preparing your app basic building block by using the Scaffold widget.

From the documentation:

Scaffold class

Implements the basic material design visual layout structure.

This class provides APIs for showing drawers, snack bars, and bottom sheets.

When you're building an app, you need some widgets as the building block for your app. The Container is one of the building block.

In short: Scaffold is the app, Container is one of the part needed to create the app.