[flutter] 스택드 위젯에 여러 위젯을 동시에 추가하는 방법

15 Dec 2023

flutter

플러터(Flutter)에서, 스택(Stack) 위젯은 여러 위젯을 겹쳐서 배치할 수 있는 유용한 기능을 제공합니다.

스택(Stack) 위젯 사용하기

스택 위젯을 사용하여 여러 위젯을 겹쳐서 화면에 표시할 수 있습니다. 각 위젯은 위치를 지정하여 스택 위젯 안에서 자유롭게 배치할 수 있습니다.

예를들어, 다음과 같은 코드를 사용하여 스택 위젯에 이미지와 텍스트를 추가할 수 있습니다.

Stack(
  children: <Widget>[
    // 배경 이미지
    Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/background.jpg'),
          fit: BoxFit.cover,
        ),
      ),
    ),
    // 텍스트
    Positioned(
      top: 100.0,
      left: 20.0,
      child: Text(
        '스택 위젯으로 여러 위젯을 겹칠 수 있습니다.',
        style: TextStyle(
          color: Colors.white,
          fontSize: 20.0,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
  ],
)

위 코드에서, Stack 위젯은 children 속성을 통해 여러 위젯을 나란히 또는 겹쳐서 배치할 수 있습니다. Positioned 위젯을 사용하여 특정 위치에 위젯을 배치할 수 있습니다.

결론

스택(Stack) 위젯을 사용하면 여러 위젯을 겹쳐서 화면에 표시할 수 있습니다. 이는 플러터(Flutter) 앱을 개발할 때 다양하고 복잡한 레이아웃을 구현할 때 매우 유용합니다.

더 많은 내용을 알고 싶다면 Flutter 공식 문서를 참고하세요.