소셜 미디어 앱을 개발할 때, 사용자가 여러 가지 콘텐츠를 볼 수 있는 피드를 구성하는 것은 중요한 부분입니다. Flutter에서는 Stack 위젯을 사용하여 각각 다른 위치와 크기에 여러 위젯을 겹쳐 표시할 수 있습니다.

스택드 위젯 소개

Stack 위젯은 여러 위젯을 겹쳐 표시할 수 있는 유연한 레이아웃 위젯입니다. 각 자식 위젯은 위치를 지정하는 속성을 통해 스택 위젯의 전체 공간에 표시됩니다.

기본 구조

Stack(
  children: <Widget>[
    // 자식 위젯들
  ],
)

Stack 위젯의 children 속성을 통해 여러 위젯을 포함할 수 있습니다.

소셜 미디어 피드 구성하기

프로필 이미지

가장 하단에는 사용자의 프로필 이미지를 표시합니다. 이를 구현하려면 Positioned 위젯을 사용하여 스택 위젯 내에서 프로필 이미지의 위치를 지정합니다.

Positioned(
  left: 16.0,
  bottom: 16.0,
  child: CircleAvatar(
    backgroundImage: NetworkImage('url_to_profile_image'),
  ),
)

포스트 내용

그 위에는 사용자의 포스트 내용을 표시합니다. 텍스트나 이미지, 비디오 등의 콘텐츠를 Positioned 위젯을 통해 위치를 지정하여 추가합니다.

Positioned(
  top: 16.0,
  left: 16.0,
  child: Text('Post content'),
)

작성일

포스트 내용 아래에는 작성일을 표시합니다. 작성일은 포스트 내용의 아래에 위치하도록 Positioned 위젯을 사용하여 위치를 지정합니다.

Positioned(
  bottom: 16.0,
  left: 16.0,
  child: Text('Posted on January 1, 2022'),
)

결론

스택드 위젯을 사용하여 소셜 미디어 피드를 구성하는 방법을 살펴보았습니다. 각각의 위젯을 위치와 크기를 조정하여 겹쳐 표시할 수 있어 다채로운 레이아웃을 구현할 수 있습니다.

더 많은 자세한 정보는 Flutter 공식 문서를 참고하시기 바랍니다.