내가 보려고 쓰는 Flutter 일기
출처 : https://api.flutter.dev/flutter/widgets/Stack-class.html
공식 문서는 정말 좋은 곳이야...

Stack

stack 클래스는 말그대로 자식 요소들을 층층이 쌓고 싶을 때 사용하면 된다. 첫번째 자식 요소를 맨 밑에 쌓고, 그 다음 자식 요소들을 그 위에 쌓아가는 형태이다.

저번에 궁금했던 그러데이션도 Stack을 쓰면 표현할 수 있다!
우선 기본적인 예시를 하나 보고, Positioned 와 같이 쓰는 것도 보도록 하자.

각각의 자식 요소 배치를 다르게 하고 싶다면, Positioned 로 자식 요소를 감싸서 위치를 지정하면 된다.

코드 예시로 알아보자 - Stack만 사용

오늘도 공식 문서의 예제 코드를 가져와 돌려보자.

import 'package:flutter/material.dart';

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

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Test Stack';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const Center(
          child: StackWidget(),
        ),
      ),
    );
  }
}


class StackWidget extends StatelessWidget {
  const StackWidget({Key? key}) : super(key: key);

  @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 아래에 자식 요소를 나열한 것 말고는 아무것도 설정해주지 않았는데, 사실은
alignment 라는 속성은 AlignmentDirectional.topStart로, fit 은 Stackfit.loose로 이미 초기화가 되어있다.




스택의 생성자를 뜯어보면 아래와 같다. 생성자 맞겠지?

  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);

children, textDirection 빼고는 모두 특정한 값으로 초기화가 되어 있는 걸 알 수 있다. 특히 overflow 속성은 이제 clipBehavior 속성으로 대체될 것이므로, overflow 속성은 가급적 쓰지 않기를 권하고 있다.




이제 위의 코드에서 alignment와 fit 속성을 조금씩 바꿔보자.
맨 왼쪽 실행화면이 children외에 아무것도 손대지 않은 위 코드 그대로이다.

StackFit.loose, AlignmentDirectional.topStart	StackFit.expand	AlignmentDirectional.bottomCenter

Positioned 까지 다루려니 글이 너무 길어져서, 다음 일기로 써봐야겠다.



오늘의 일기는 여기까지!