Placeholder class

다른 위젯이 언젠가 추가될 위치를 나타내는 상자를 그리는 위젯입니다.

이 위젯은 인터페이스가 아직 완성되지 않았다는 것을 개발 중에 나타내는 데 유용합니다.

기본적으로 플레이스홀더는 컨테이너 크기에 맞게 크기가 조정됩니다. 플레이스홀더가 무한 공간에 있는 경우, 지정된 fallbackWidth 와 fallbackHeight 에 따라 크기가 조정됩니다.

https://youtu.be/LPe56fezmoo

공식 문서 코드

Placeholder UI를 임시로 구성할 때 사용하는 위젯이다. 즉 개발 중에 아직 완성되지 않은 위젯 자리에 표시용으로 사용한다는 뜻이다. 굉장히 간단하여 사용하기 쉬운데 한번 알아보자.

하위 속성

속성명	타입	기본값	설명
color	Color	Color(0xFF455A64)	박스를 그릴 때 사용하는 선 색상
strokeWidth	double	2.0	박스를 그릴 때 사용되는 선의 두께
fallbackWidth	double	400.0	부모로부터 가로 제약이 없을 때 사용할 기본 너비
fallbackHeight	double	400.0	부모로부터 세로 제약이 없을 때 사용할 기본 높이
child	Widget?	null	Placeholder 안에 포함시킬 자식 위젯

사용방법은 정말 간단하다.

Placeholder(),

끝이다. 이렇게만 해줘면 내부에서 expand 하려는 성질이 있기 때문에 차지할 수 있는 공간을 다 차지하고 기본적인 색상과 선 두께로 표시가 되게 된다.

하위 속성인 color 는 말그대로 이 박스 선(stroke) 색상 바꾸는 거다.

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

그 다음엔 strokeWidth 다. 이것도 말 그대로 선 두께 지정 하는 거다.

Placeholder(
  strokeWidth: 10,
),

그다음이 fallbackHeight, fallbackWidth 인데 이 둘은 레이아웃 상 부모 위젯의 제약이 없을 때 사용할 기본 크기가 되시겠다.

근데 써보니까 Column 혹은 Row 를 부모로 가지고 있어야 동작했다. (Column = Height, Row = Width)

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Placeholder(
          fallbackHeight: 100,
          fallbackWidth: 200,
        ),
      ],
    ),
  ],
),

마지막으론 child 인데 솔직히 이건 설명 안해도 될것이다.

이렇게 간단하게 Placeholder 에 대해서 알아보았는데 되게 사용이 쉽고 좋은 위젯이라 개발중에 특히 다른 사람한테 아직 개발 안됬다고 알려야 할 때 사용하기 정말 좋은 위젯인 것 같다. 그럼 도움이 되었길 바라며 마치겠다.