Placeholder Widget – Flutter Widget Guide By Flutter Agency

· 4 min read
Placeholder Widget
Placeholder Widget

What is a Placeholder Widget in Flutter?

Placeholder Widget is a simple widget, they can stand in for a UI component until you are ready to implement it. Just like a container.

The constructor of the Placeholder Widget will look like below :

Placeholder({ 
Key key, 
this.color = const Color(0xFF455A64),
this.fallbackWidth = 400.0, 
this.fallbackHeight = 400.0,
});

How to use Placeholder Widget in Flutter?

The following code snippet tells us how to implement Placeholder Widget in Flutter.

placeholder()

Generally, placeholders will expand to fill all the available space.

fallbackWidth

 fallbackWidth: 100,

Users can constrain the height or the width with fallbackHeight or fallbackWidth when this widget is placed in an unbounded parent like a ListView Widget.

Property

  • color: color parameter will set the color of the line in the Placeholder. Have a look at an example below.
 color: Colors.red,

We will get output like below:

Color

Color in Placeholder

  • double fallbackHeight: The height to use when the placeholder is in a situation with an unbounded height.

 Placeholder(
          fallbackHeight: 100,
        ),

We will get output like below:

PlaceHolder

Placeholder fallbackHeight

  • fallbackWidth: The width to use when the placeholder is in a situation with an unbounded width.

Placeholder(
          fallbackWidth: 100,
        )
  • StrokeWidth: The default width of the stroke is 4.0. You can set it using StrokeWidth property.

 Placeholder(
          strokeWidth: 4,
        ),

The complete Source code will look Like below :

Column(
      children: <Widget>[
        SizedBox(
          height: 30,
        ),
        Placeholder(
          color: Colors.red,
          strokeWidth: 4,
          fallbackWidth: 100,
          fallbackHeight: 100,
        ),
        SizedBox(
          height: 20,
        ),
        Container(
          constraints: BoxConstraints.expand(
            height: 100,
            width: 100,
          ),
          child: Placeholder(
            color: Colors.blueAccent,
            strokeWidth: 4,
            fallbackWidth: 10,
            fallbackHeight: 100,
          ),
        ),
      ],
    );

In the Above code snippet we have wrapped a Container Widget in a Column Widget which will get output like below:

Complete-PlaceHolder

Placeholder in Flutter

Conclusion:

In this article, we have been through What is Placeholder Widget in Flutter along with how to implement it in a Flutter.

Thanks for reading !!!
Keep Flirting Flutter!!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply