Flutter Placeholder Widget Examples

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