Designing complex layouts for applications can take time. Sometimes you want to show a page before it is finished, but you do not want to show a blank page. Flutter provides a widget that can be used to put something on the page instead of nothing. The widget is called Placeholder.
In this post, I will introduce some examples about using the Placeholder widget.
Table of Contents
Basic
Put Placeholder widgets for certain part of a layout:

Scaffold( body: Padding( padding: const EdgeInsets.all(16.0), child: Column( children: <Widget>[ Container( height: 150, child: Padding( padding: const EdgeInsets.all(8.0), child: Placeholder(), ) ), Expanded( child: Row( children: <Widget>[ Flexible( flex: 1, child: Padding( padding: const EdgeInsets.all(8.0), child: Placeholder(), ), ), Flexible( flex: 2, child: Padding( padding: const EdgeInsets.all(8.0), child: Placeholder(), ), ), ], ), ), Container( height: 150, child: Padding( padding: const EdgeInsets.all(8.0), child: Placeholder(), ) ), ], ), ), )
Fallback Width and Height
Placeholder widget has 2 properties for setting its width and height when there is no bounded with and height.
fallbackWidth
: It is used when the placeholder has unbounded width.fallbackHeight
: It is used when the placeholder has unbounded height.

Scaffold( body: Column( children: <Widget>[ Padding( padding: const EdgeInsets.all(8.0), child: Placeholder( fallbackHeight: 300, fallbackWidth: 100, ), ), ], ), )
Style with color and stroke width
color
: The color of the stroke.strokeWidth
: The width of the placeholder’s lines.

Scaffold( body: Padding( padding: const EdgeInsets.all(16.0), child: Column( children: <Widget>[ Padding( padding: const EdgeInsets.all(16.0), child: Placeholder( color: Colors.red, fallbackHeight: 150, strokeWidth: 5 ), ), Expanded( child: Row( children: <Widget>[ Flexible( flex: 1, child: Padding( padding: const EdgeInsets.all(16.0), child: Placeholder(color: Colors.blue, strokeWidth: 5), ), ), Flexible( flex: 2, child: Padding( padding: const EdgeInsets.all(16.0), child: Placeholder(color: Colors.blue, strokeWidth: 5), ), ), ], ), ), Container( height: 150, child: Padding( padding: const EdgeInsets.all(16.0), child: Placeholder(color: Colors.green, strokeWidth: 5), ) ), ], ), ), )