[flutter] 플러터 슬라이딩 패널 이벤트 처리

플러터(Flutter)는 다양한 기능을 가진 UI를 만들 수 있는 크로스 플랫폼 프레임워크입니다. 슬라이딩 패널은 사용자가 슬라이드 동작을 통해 특정 기능을 실행하거나 정보를 표시할 수 있는 유용한 기능입니다. 이번 블로그에서는 플러터에서 슬라이딩 패널의 이벤트를 처리하는 방법을 알아보겠습니다.

패널 위젯 준비하기

우선, 슬라이딩 패널을 만들기 위해 SlidingUpPanel 패키지를 사용하겠습니다. 이 패키지는 플러터에서 슬라이딩 패널을 쉽게 구현할 수 있도록 도와줍니다. 프로젝트의 pubspec.yaml 파일에 해당 패키지를 추가한 후, 패널을 구현할 화면에 SlidingUpPanel 위젯을 생성합니다.

import 'package:flutter/material.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';

class SlidingPanelScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sliding Panel'),
      ),
      body: SlidingUpPanel(
        panelBuilder: (ScrollController sc) => _buildPanel(sc),
        body: _buildBody(),
        minHeight: 200,
        maxHeight: 400,
        borderRadius: BorderRadius.vertical(top: Radius.circular(15)),
      ),
    );
  }

  Widget _buildPanel(ScrollController sc) {
    return ListView(
      controller: sc,
      children: [
        ListTile(
          title: Text('Option 1'),
        ),
        ListTile(
          title: Text('Option 2'),
        ),
        ListTile(
          title: Text('Option 3'),
        ),
      ],
    );
  }

  Widget _buildBody() {
    return Container(
      color: Colors.white,
      child: Center(
        child: Text('Swipe up to open sliding panel'),
      ),
    );
  }
}

위 코드에서는 SlidingUpPanel 위젯을 bodypanelBuilder로 감싸 슬라이딩 패널을 생성하고 있습니다. minHeight, maxHeight, borderRadius 등의 속성을 지정하여 원하는 패널 스타일을 설정할 수 있습니다. panelBuilder에서는 패널 내용을 구성하는 위젯을 반환하는 함수를 정의합니다.

패널 이벤트 처리하기

패널을 생성했으면 이제 슬라이딩 패널의 이벤트를 처리하는 방법에 대해 알아보겠습니다. SlidingUpPanel 위젯은 onPanelSlide, onPanelOpened, onPanelClosed 등의 콜백 함수를 제공하여 패널의 상태 변화에 따라 원하는 로직을 수행할 수 있습니다.

SlidingUpPanel(
  // ...

  onPanelSlide: (double pos) {
    // 패널 슬라이드 중인 경우 호출되는 콜백 함수
    print('Panel sliding position: $pos');
  },
  onPanelOpened: () {
    // 패널이 열린 경우 호출되는 콜백 함수
    print('Panel opened');
  },
  onPanelClosed: () {
    // 패널이 닫힌 경우 호출되는 콜백 함수
    print('Panel closed');
  },

  // ...
)

위 코드에서는 onPanelSlide, onPanelOpened, onPanelClosed에서 각각 적절한 로직을 추가할 수 있습니다. onPanelSlide의 경우, pos 매개변수를 통해 패널 슬라이딩 위치 정보를 얻을 수 있습니다. onPanelOpenedonPanelClosed는 패널이 열리거나 닫힐 때 호출되는 콜백 함수입니다.

이제 여러분은 플러터에서 슬라이딩 패널을 구현하고 이벤트를 처리하는 방법을 알게 되었습니다. 슬라이딩 패널을 사용해 다양한 기능을 추가하고 효과적으로 정보를 표시해보세요!

참고 자료