[flutter] 플러터 슬라이딩 패널 화면 닫기

플러터는 크로스 플랫폼 앱 개발을 위한 인기 있는 프레임워크입니다. 슬라이딩 패널은 많은 앱에서 사용되는 일반적인 UI 패턴입니다. 사용자가 화면의 한쪽에서 열거나 닫을 수 있는 패널을 제공합니다. 이번 포스트에서는 플러터에서 슬라이딩 패널을 닫는 방법을 알아보겠습니다.

1. 슬라이딩 패널을 위한 패키지 추가

먼저, 슬라이딩 패널을 구현하기 위해 flutter_sliding_panel 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 패키지를 추가합니다.

dependencies:
  flutter_sliding_panel: ^0.2.3

2. 슬라이딩 패널 생성 및 닫기 버튼 추가

flutter_sliding_panel 패키지를 사용하여 슬라이딩 패널을 생성하고 화면에 닫기 버튼을 추가할 수 있습니다. 다음 예제 코드를 참고하세요.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  final _panelController = PanelController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('슬라이딩 패널 닫기 예제'),
      ),
      body: SlidingPanel(
        controller: _panelController,
        body: Center(
          child: Text('슬라이딩 패널'),
        ),
        panel: Container(
          color: Colors.white,
          child: Column(
            children: [
              Text('슬라이딩 패널 내용'),
              RaisedButton(
                child: Text('닫기'),
                onPressed: () {
                  _panelController.close();
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

3. 패널 닫기 버튼 동작 확인

위의 코드에서 RaisedButton 위젯에서 onPressed 콜백 함수에서 _panelController.close() 를 호출하여 패널을 닫을 수 있습니다. 이렇게하면 화면에서 슬라이딩 패널이 사라집니다.

위의 예제 코드에서 슬라이딩 패널의 내용과 닫기 버튼을 자유롭게 수정하여 원하는 스타일과 동작을 구현할 수 있습니다.

이제 플러터에서 슬라이딩 패널을 생성하고 닫는 방법을 알게되었습니다. 앱의 UI와 요구사항에 맞게 직접 적용해보세요.

참고: 이 포스트에서 사용된 예제 코드는 flutter_sliding_panel 패키지 버전 0.2.3을 기준으로 작성되었습니다. 패키지의 버전이 변경되면 동작이 다를 수 있습니다.