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.
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),
)
),
],
),
),
)
