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 layouts.it is a widget that draws a blank box as per the Flutter documentation.

Table of Contents

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

  Container(
                child: Placeholder(
                  color: Colors.blue,
                ),
              ),

Stroke Width in Placeholder widget

here we added line stroke width in placeholder widget

 Container(
                child: Placeholder(
                  color: Colors.blue,
                  strokeWidth: 5.0,
                ),
              ),

Fallback height and width in Placeholder widget

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

Placeholder widget with GridView

Here we use Placeholder widget with GridView.

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

Conclusion

In above tutorial we used Placeholder widget in flutter.

Additional Resources

https://api.flutter.dev/flutter/widgets/Placeholder-class.html

How to use Placeholder widget in Flutter