[flutter] 플러터 슬라이딩 패널 예제

이번에는 Flutter에서 슬라이딩 패널을 구현하는 예제를 소개하겠습니다. 슬라이딩 패널은 앱 내에서 특정 영역을 좌우로 슬라이드하여 추가적인 컨텐츠를 보여줄 수 있는 UI 요소입니다. 이 예제를 통해 간단한 슬라이딩 패널을 구현하는 방법을 알아보겠습니다.

패키지 추가

먼저, flutter_sliding_panel 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 아래의 의존성을 추가해주세요.

dependencies:
  flutter_sliding_panel: ^1.0.0

의존성을 추가한 후, 터미널에서 flutter packages get 명령어를 실행하여 패키지를 가져오세요.

슬라이딩 패널 구현

이제 슬라이딩 패널을 구현해보겠습니다. 먼저, SlidingPanel() 위젯을 생성하고 bodypanel 프로퍼티를 설정해주어야 합니다.

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(
      title: 'Sliding Panel Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Sliding Panel Example'),
        ),
        body: SafeArea(
          child: SlidingPanel(
            body: Container(
              color: Colors.blue,
              child: Center(
                child: Text('Main Content'),
              ),
            ),
            panel: Container(
              color: Colors.yellow,
              child: Padding(
                padding: EdgeInsets.all(16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text('Sliding Panel', style: TextStyle(fontSize: 20)),
                    SizedBox(height: 8),
                    Text('Additional Content'),
                    SizedBox(height: 16),
                    ElevatedButton(
                      onPressed: () {
                        // 패널을 숨기는 로직 구현
                      },
                      child: Text('Hide Panel'),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

위의 코드에서 body 프로퍼티에는 슬라이딩 패널이 보여질 메인 컨텐츠를 나타내는 위젯을 설정해야 합니다. panel 프로퍼티에는 슬라이딩 패널 안에 들어갈 추가적인 컨텐츠를 정의하는 위젯을 설정합니다.

패널 숨기기

패널을 숨기기 위해서는 ElevatedButton 위젯의 onPressed 콜백에서 패널을 숨기는 로직을 추가해야 합니다. 예를 들면, panelHidden이라는 상태 변수를 사용하여 패널의 노출 여부를 관리하고, 버튼을 눌렀을 때 setState 함수를 호출하여 상태를 변경합니다.

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool panelHidden = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // ...

      body: SafeArea(
        child: SlidingPanel(
          // ...

          panel: AnimatedContainer(
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeInOut,
            height: panelHidden ? 0 : null,
            child: Container(
              // 내용 생략
            ),
          ),

          // ...
        ),
      ),
    );
  }
}

위 코드에서 AnimatedContainer 위젯을 사용하여 패널의 높이를 조절하고, 패널을 숨길 때는 height를 0으로 설정합니다. 이렇게 하면 패널이 부드럽게 사라지거나 나타날 수 있습니다.

실행

이제 앱을 실행해보세요. 메인 화면에서 좌우로 슬라이드하여 패널을 나타내거나 숨길 수 있습니다. 패널 내부의 버튼을 클릭하면 패널이 숨겨집니다.

결론

위 예제를 통해 Flutter에서 슬라이딩 패널을 구현하는 방법을 알아보았습니다. flutter_sliding_panel 패키지를 사용하여 간단하게 슬라이딩 패널을 만들 수 있습니다. 이 기능을 활용하여 앱의 사용성을 개선시킬 수 있습니다.