[flutter] 수평으로 스택드 위젯 사용하기

15 Dec 2023

flutter

Flutter에서 Stack 위젯을 사용하여 수평으로 요소들을 겹치게 하는 방법은 아주 간단합니다. 이 블로그 포스트에서는 Flutter 앱에서 수평으로 스택드 위젯을 사용하는 방법에 대해 자세히 알아보겠습니다.

Stack 위젯 개요

Flutter의 Stack 위젯은 다른 위젯들을 겹쳐서 표시할 수 있도록 해주는 강력한 기능을 제공합니다. 이를 사용하여 여러 위젯을 겹쳐서 사용자 정의 레이아웃을 만들 수 있습니다.

수평으로 스택드 위젯 사용하기

다음은 Flutter에서 수평으로 Stack 위젯을 사용하는 간단한 예제입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Stack(
            alignment: Alignment.center,
            children: <Widget>[
              Container(
                color: Colors.blue,
                width: 200,
                height: 200,
              ),
              Container(
                color: Colors.red,
                width: 100,
                height: 100,
              ),
              Container(
                color: Colors.yellow,
                width: 50,
                height: 50,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 예제에서는 Stack 위젯을 사용하여 세 개의 Container 위젯을 수평으로 겹쳤습니다. alignment 속성을 사용하여 모든 자식 위젯을 중앙에 정렬하였습니다.

결론

Flutter의 Stack 위젯을 사용하면 다양한 위젯을 겹쳐서 복잡한 레이아웃을 만들 수 있습니다. 수평으로 Stack 위젯을 사용하면 여러 위젯을 가로 방향으로 겹칠 수 있어 다양한 디자인을 구현할 수 있습니다.

더 많은 정보를 원하시면 Flutter 공식 문서를 참고하시기 바랍니다.

수평으로 Stack 위젯을 사용하는 방법에 대해 자세히 살펴보았습니다. 이제 여러분도 자신만의 멋진 수평 레이아웃을 만들어보세요!