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

Leave a Comment

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close