Flutter - Stack을 사용하여 여러 위젯 중첩하기

Stack 위젯은 다양한 component들을 겹쳐서 쌓을 수 있게 도와주는 위젯

기본 형태는 Stack[] 이다.

해당 실습에서는 여러 Component를 넣고, 각 Component에 margin를 다르게 주어 일부만 겹치게 표현했다.

밑의 코드 예제에서는 Stack()에 children을 넣어 [] 배열한다.

 

해당 코드는 전체적인 코드가 아니니 주의할 것 ( 이해를 돕기 위해 잘라온 것 ) 

child: Stack(
          children: [
            Container(
              width: 200,
              height: 200,
              color: Colors.blue,
            ),
            Container(
              width: 200,
              height: 200,
              margin: const EdgeInsets.only(top: 50,left: 50),
              color: Colors.red,
            ),
            Container(
              width: 200,
              height: 200,
              margin: const EdgeInsets.only(top: 100,left: 100),
              color: Colors.green,
            ),
          ]
          )

 

 

해당 글의 전체 코드 : https://github.com/land-waters/flutter-study/blob/chap03/flutter_application_1/lib/main.dart

flutter-study/flutter_application_1/lib/main.dart at chap03 · land-waters/flutter-study