Flutter Stack Widget

플러터의 Stack 위젯은 여러개 위젯을 겹쳐서 사용할 수 있는 컨테이너 형 위젯 입니다.

• 가장 처음에 설정한 위젯은 가장 아래에 놓이게 되고 제일 나중에 나타나는 위젯은 화면에서 가장 위로 올라갑니다.
• 위치 값을 가질 수 있으며, 위치 값을 주지 않으면 스택에 Alignment 설정에 의해서 결정이 됩니다.

예제

특정 위치가 없는 경우입니다.

Stack(
  children: [
    Container(
      width: 350,
      height: 350,
      color: Colors.blue,
    ),
    Container(
      width: 300,
      height: 300,
      color: Colors.red,
    ),
    Container(
      width: 250,
      height: 250,
      color: Colors.green,
    ),
  ],
),

Result:

특정 위치를 Positioned 를 사용할 수 있습니다.

Stack(   
    children: <Widget>[  
      // Max Size Widget  
      Container(  
        height: 300,  
        width: 400,  
        color: Colors.blue,    
      ),  
      Positioned(  
        top: 30,  
        right: 20,  
        child: Container(  
          height: 100,  
          width: 150,  
          color: Colors.red,   
        ),  
      ),  
      Positioned(  
        top: 30,  
        left: 20,  
        child: Container(  
          height: 100,  
          width: 150,  
          color: Colors.green,   
        ),  
      ),  
    ],  
  ),  

Result: