Flutter 기초 - Widget Stack (15)

 

Flutter 기초 - Widget Stack (15)

 

 

Widget Stack

 - Stack위젯은 자식 위젯들을 겹쳐서 배치할 수 있게 해주는 위젯으로 Stack의 자식들은 기본적으로 왼쪽 상단 모서리에서 시작하여 쌓고 다른 위젯과 달리 각 자식 위젯들은 서로의 위치를 고려하지 않고 독립적으로 배치된다.

 - Stack은 가장 먼저 선언된 Container가 가장 아래에 위치하고 이후 선언된 위젯들은 위로 쌓이게 된다.

 

Stack - Align

 - Align위젯은 Stack내에서 특정한 위치에 자식을 배치하고자 할때 사용되며 Stack전체 공간 내에서 자식 위젯의 정확한 위치를 조정하고 alignment속성을 통해서 결정한다.

 

Stack - Align - alignment

 - alignment속성은 Align위젯 내에서 자식을 정렬하는 방법을 결정한다.

 

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Flexible and Expanded'),
      ),
      body: Body(),
    ),
  ));
}

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          width: 500,
          height: 500,
          color: Colors.blue,
        ),
        Container(
          width: 400,
          height: 400,
          color: Colors.red,
        ),
        Container(
          width: 300,
          height: 300,
          color: Colors.black,
        ),
        Align(
            alignment: Alignment(0.5, -0.5),
            child: Container(
              width: 200,
              height: 200,
              color: Colors.yellow,
            )),
      ],
    );
  }
}