[Flutter] 레이아웃 관련 위젯(2) : Row, Column, Stack

Row

특징

• 자식 위젯을 가로 방향(수평)으로 나열하는 위젯

 

예시코드

import 'package:flutter/material.dart';

class RowExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Row 예제'),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround, // 가로 방향으로 균등한 간격 유지
        crossAxisAlignment: CrossAxisAlignment.center, // 세로 축 기준 가운데 위치(기본값이 center)
        children: [
          Container(color: Colors.red, width: 50, height: 50),
          Container(color: Colors.green, width: 50, height: 50),
          Container(color: Colors.blue, width: 50, height: 50),
        ],
      ),
    );
  }
}

 

결과

 

속성

• mainAxisAlignment : 가로 방향 정렬 방식 지정(주 축)
• crossAixsAlignment : 세로 방향 정렬 방식(교차 축)
• children : 자식 위젯 리스트

---

Column

특징

• 자식 위젯을 세로 방향(수직)으로 나열하는 위젯

 

예시코드

import 'package:flutter/material.dart';

class ColumnExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Column 예제'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 세로 방향으로 간격이 균등하게 배열
        crossAxisAlignment: CrossAxisAlignment.start, // 가로 방향 기준 시작점에 위치
        children: [
          Container(color: Colors.red, width: 100, height: 50),
          Container(color: Colors.green, width: 100, height: 50),
          Container(color: Colors.blue, width: 100, height: 50),
        ],
      ),
    );
  }
}

 

결과

 

속성

• mainAxisAlignment : 세로 방향 정렬 방식 지정(주 축)
• crossAixsAlignment : 가로 방향 정렬 방식(교차 축)
• children : 자식 위젯 리스트

---

Stack

특징

• 위젯을 겹쳐서 배치하는데 사용
• 게임 화면, 알암 배지, 드래그 가능한 아이템 등 다양한 상황에 사용

 

예시코드

import 'package:flutter/material.dart';

class StackExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold( // 여기서는 Scaffold가 부모 위젯(제한된 크기가 아님)
      appBar: AppBar(
        title: Text('Stack 예제'),
      ),
      body: Stack(
        alignment: Alignment.center,  
        children: [
          Container(color: Colors.blue, width: 200, height: 200), // 크기 순으로 배치
          Container(color: Colors.green, width: 150, height: 150),
          Container(color: Colors.red, width: 100, height: 100),
        ],
      ),
    );
  }
}

 

결과

• alignment : Alignment.center

• alignment : Alignment.bottomLeft

 

속성

• alignment : 자식 위젯들의 정렬 위치 지정
• fit : loose(기본), expand로 부모 크기 맞춤
• clipBehavior : 부모 영역을 초과한 자식 위젯을 자를지 여부 설정

 

Stack에서 부모 위젯의 크기 결정 방식

• 부모 위젯이 제한된 크기를 제공하는 경우
  • Stack은 부모의 크기만큼 확장
  • Expanded, Flexible, SizedBox, Container 등이 크기를 강제할 수 있음.
• 부모 위젯이 제한된 크기를 제공하지 않는 경우
  • Stack은 자식 위젯 중 가장 큰 크기에 맞춰 크기 결정