[flutter] 플러터 스택드 위젯의 정렬 방법과 예시 코드

15 Dec 2023

flutter

플러터(Flutter)에서 스택(Stack) 위젯은 화면에 위젯을 겹쳐서 배치할 때 사용됩니다. 이때, 스택 내의 위젯을 정렬하는 방법에 대해 알아보겠습니다.

1. 정렬 속성

플러터의 스택 위젯은 alignment 속성을 사용하여 내부 위젯을 정렬합니다. 사용 가능한 정렬 값은 다음과 같습니다.

topLeft: 상단 좌측에 정렬
topCenter: 상단 가운데에 정렬
topRight: 상단 우측에 정렬
centerLeft: 중앙 좌측에 정렬
center: 중앙에 정렬
centerRight: 중앙 우측에 정렬
bottomLeft: 하단 좌측에 정렬
bottomCenter: 하단 가운데에 정렬
bottomRight: 하단 우측에 정렬

2. 예시 코드

다음은 플러터에서 스택 위젯의 정렬을 사용하는 간단한 예시 코드입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stack Alignment Example'),
        ),
        body: Center(
          child: Stack(
            alignment: Alignment.center, // 중앙에 정렬
            children: <Widget>[
              Container(
                width: 200,
                height: 200,
                color: Colors.blue,
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.red,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위의 예시 코드는 두 개의 컨테이너를 스택으로 겹쳐서 배치하고, 스택의 alignment 속성을 사용하여 중앙에 정렬하는 방법을 보여줍니다.

이러한 방식으로 플러터의 스택 위젯을 활용하여 다양한 화면을 구성할 수 있습니다.

더 많은 정보는 플러터 공식 문서를 참고하시기 바랍니다.