[flutter] 플러터 슬라이딩 패널 모달창

플러터(Flutter)는 구글에서 개발한 UI 프레임워크로, 모바일, 웹 및 데스크톱 애플리케이션을 만들 수 있습니다. 이번 글에서는 플러터에서 슬라이딩 패널 모달창을 구현하는 방법에 대해 알아보겠습니다.

1. 슬라이딩 패널 위젯 가져오기

슬라이딩 패널 모달창을 구현하기 위해 먼저 flutter_sliding_panel 패키지를 사용합니다. pubspec.yaml 파일에 다음을 추가하여 패키지를 가져옵니다.

dependencies:
  flutter_sliding_panel: ^0.6.0

의존성을 추가한 후, 패키지를 가져오기 위해 import문을 추가합니다.

import 'package:flutter_sliding_panel/flutter_sliding_panel.dart';

2. 슬라이딩 패널 구성하기

슬라이딩 패널을 구성하기 위해 SlidingPanel 위젯을 사용합니다. 아래는 기본적인 슬라이딩 패널 구성 예시입니다.

SlidingPanel(
  panelController: PanelController(),
  body: Scaffold(
    appBar: AppBar(
      title: Text("슬라이딩 패널 모달창"),
    ),
    body: Center(
      child: Text("메인 화면"),
    ),
  ),
  panel: Container(
    color: Colors.white,
    child: Column(
      children: [
        Text("슬라이딩 패널 모달창"),
        RaisedButton(
          child: Text("닫기"),
          onPressed: () {
            panelController.close();
          },
        ),
      ],
    ),
  ),
)

위의 코드에서는 SlidingPanel 위젯을 사용하여 기본적인 슬라이딩 패널을 구성합니다. body에는 메인 화면을, panel에는 패널 내용을 작성합니다.

3. 모달창 열기 및 닫기

panelController를 사용하여 슬라이딩 패널을 열고 닫을 수 있습니다. 예를 들어, 위의 코드에서 패널 내부에 있는 “닫기” 버튼을 누르면 패널이 닫히도록 할 수 있습니다.

RaisedButton(
  child: Text("닫기"),
  onPressed: () {
    panelController.close();
  },
),

4. 참고 자료

위의 링크에서 flutter_sliding_panel 패키지에 대한 자세한 정보를 확인할 수 있습니다.