[flutter] 플러터 슬라이딩 패널과 터치 이벤트

플러터(Flutter)는 Google에서 개발한 UI 프레임워크로, 모바일, 웹 및 데스크톱 애플리케이션 개발을 위해 사용됩니다. 이번에는 플러터에서 슬라이딩 패널과 터치 이벤트를 다루는 방법을 알아보겠습니다.

1. 슬라이딩 패널

슬라이딩 패널은 유연한 UI 요소로, 사용자가 화면 어디에서든 특정 패널을 열고 닫을 수 있습니다. 이는 사이드 메뉴, 설정 패널 등의 구현에 유용합니다.

플러터에서는 SlidingPanel 위젯이 기본적으로 제공되지 않기 때문에, 직접 구현해야 합니다.

아래는 플러터에서 슬라이딩 패널을 구현하는 간단한 코드입니다.

import 'package:flutter/material.dart';

class SlidingPanel extends StatefulWidget {
  @override
  _SlidingPanelState createState() => _SlidingPanelState();
}

class _SlidingPanelState extends State<SlidingPanel> {
  bool _isOpen = false;

  void _togglePanel() {
    setState(() {
      _isOpen = !_isOpen;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sliding Panel Example'),
      ),
      body: Stack(
        children: [
          // Main Content
          Positioned.fill(
            child: Container(
              color: Colors.white,
              child: Center(
                child: Text('Main Content'),
              ),
            ),
          ),
          // Sliding Panel
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            height: _isOpen ? 200 : 0,
            child: Container(
              color: Colors.grey,
              child: Center(
                child: Text('Sliding Panel'),
              ),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _togglePanel,
        child: Icon(Icons.menu),
      ),
    );
  }
}

위 코드에서 SlidingPanelStatefulWidget로 구현되어 있으며, bool _isOpen 변수를 사용하여 패널의 열림/닫힘 상태를 관리합니다. _togglePanel 메서드는 패널의 상태를 토글하는 역할을 합니다.

위 코드를 실행하면, 메인 컨텐츠와 함께 하단에 위치한 슬라이딩 패널을 볼 수 있습니다. FloatingActionButton을 터치하면 패널이 열리거나 닫힙니다.

2. 터치 이벤트

플러터에서는 다양한 터치 이벤트를 처리할 수 있습니다. 주요 터치 이벤트에는 onTap, onDoubleTap, onLongPress, onPanStart, onPanUpdate, onPanEnd 등이 있습니다.

아래는 플러터에서 터치 이벤트를 처리하는 예시 코드입니다.

import 'package:flutter/material.dart';

class TouchEventExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Touch Event Example'),
      ),
      body: GestureDetector(
        onTap: () {
          print('Tapped');
        },
        onDoubleTap: () {
          print('Double Tapped');
        },
        onLongPress: () {
          print('Long Pressed');
        },
        onPanStart: (details) {
          print('Pan Started');
        },
        onPanUpdate: (details) {
          print('Pan Updated');
        },
        onPanEnd: (details) {
          print('Pan Ended');
        },
        child: Container(
          color: Colors.white,
          child: Center(
            child: Text('Tap, Double Tap, Long Press, Pan'),
          ),
        ),
      ),
    );
  }
}

위 코드는 GestureDetector 위젯을 사용하여 터치 이벤트를 처리합니다. onTap, onDoubleTap, onLongPress 등 다양한 터치 이벤트에 대한 처리 로직을 구현할 수 있습니다.

실행하면 터치 이벤트에 따라 콘솔에 해당하는 메시지가 출력됩니다.

결론

플러터에서는 슬라이딩 패널과 터치 이벤트를 간단하게 구현할 수 있습니다. 이를 활용하여 보다 유연하고 상호작용적인 UI를 개발할 수 있습니다.