How to use Placeholder widget in Flutter

In this tutorial we will lean about How to use placeholder widget . placeholder widget is used for building complex is a widget that draws a blank box as per the Flutter documentation.

Placeholder widget

this constructor is use to create Placeholder widget

 const Placeholder({
    Key key,
    this.color = const Color(0xFF455A64), // Blue Grey 700
    this.strokeWidth = 2.0,
    this.fallbackWidth = 400.0,
    this.fallbackHeight = 400.0,

Properties in Placeholder widget

  • color: The color that is used to draw the placeholder container.
  • strokeWidth: width of placeholder lines
  • fallbackWidth and fallbackHeight: Placeholder unbounded height and width.

Adding the Color of the Placeholder Widget

here we added blue color in placeholder widget

                child: Placeholder(

Stroke Width in Placeholder widget

here we added line stroke width in placeholder widget

                child: Placeholder(
                  strokeWidth: 5.0,

Fallback height and width in Placeholder widget

                child: Placeholder(
                  strokeWidth: 10.0,
                  fallbackHeight: 200.0,
                  fallbackWidth: MediaQuery.of(context).size.width,

Placeholder widget with GridView

Here we use Placeholder widget with GridView.

        padding: EdgeInsets.symmetric(vertical: 4.0, horizontal: 2.0),
            SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.all(12.0),
            child: Placeholder(),


In above tutorial we used Placeholder widget in flutter.

Additional Resources

Leave a Comment