Stack과 Positioned

Stack은 자식 요소들을 층층이 쌓을 때 사용한다.

첫 번째 자식 요소를 제일 아래에 쌓고 그다음 자식 요소들을 위에 쌓아가는 형태이다.

보통 이미지 위에 텍스트를 겹치게 하거나 할때 많이 사용한다.

 

예제를 살펴보자.

 

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Stack",
      home: Scaffold(
        appBar: AppBar(
          title: Text("Stack"),
        ),
        body: Center(
          child: StackWidget(),
        ),
      ),
    );
  }
}

class StackWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          width: 200,
          height: 200,
          color: Colors.red,
        ),
        Container(
          width: 150,
          height: 150,
          color: Colors.green,
        ),
        Container(
          width: 100,
          height: 100,
          color: Colors.blue,
        ),
      ],
    );
  }
}

스택의 구조를 살펴보면 

 

Stack({
    Key? key,
    this.alignment = AlignmentDirectional.topStart,
    this.textDirection,
    this.fit = StackFit.loose,
    @Deprecated(
      'Use clipBehavior instead. See the migration guide in flutter.dev/go/clip-behavior. '
      'This feature was deprecated after v1.22.0-12.0.pre.',
    )
    this.overflow = Overflow.clip,
    this.clipBehavior = Clip.hardEdge,
    List<Widget> children = const <Widget>[],
  }) : assert(clipBehavior != null),
       super(key: key, children: children);

 

alignment는 AlignmentDirectional.topStart : 위치가 지정되지 않은 각 자식의 위 시작 모서리는 동일한 곳에 위치한다.

fit은 StackFit.loose : 위치가 지정되지 않은 자식의 크기가 loose(<->expand)해진다.

가 기본값으로 지정되어 있다.

 

 

 

만약 자식요소들의 위치를 조절하고 싶다면 Positioned를 사용하면 된다!

Positioned는 Stack 안에서 사용되어야 한다.

 

위 스택 코드에서 마지막 파란색 컨테이너를 Positioned로 감싼 후 위치 값을 주면 이동하는 것을 볼 수 있다.

 

  Positioned(
          left: 30,
          top: 30,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),