[flutter] 스택드 위젯에서 버튼 위젯 사용하는 방법

15 Dec 2023

flutter

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(
            children: [
              Container(
                width: 200,
                height: 200,
                color: Colors.blue,
              ),
              Positioned(
                bottom: 16,
                right: 16,
                child: ElevatedButton(
                  onPressed: () {
                    // 버튼을 눌렀을 때 수행할 동작
                  },
                  child: Text('버튼'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 코드에서는 Positioned 위젯을 사용하여 버튼을 특정 위치에 배치하고 있습니다. Positioned 위젯을 사용하면 스택 위젯 안에서 위젯의 위치를 지정할 수 있습니다.

요약

스택(Stack) 위젯 안에서 버튼을 사용할 때는 Positioned 위젯을 활용하여 버튼의 위치를 명확히 지정해야 합니다. 이를 통해 버튼과 다른 위젯이 겹칠 때 발생할 수 있는 터치 이벤트 처리 문제를 해결할 수 있습니다.