[flutter] 플러터 슬라이딩 패널 애니메이션

개요

이번 글에서는 Flutter에서 슬라이딩 패널 애니메이션을 구현하는 방법을 알아보겠습니다. 슬라이딩 패널은 사용자가 아래로 스와이프할 때 화면 위로 슬라이딩되어 나타나는 패널입니다. 이는 사용자에게 추가 정보를 제공하거나 메뉴를 펼칠 때 유용하게 사용될 수 있습니다.

구현 방법

  1. Flutter 프로젝트를 생성하고 필요한 패키지를 추가합니다. 이 예제에서는 sliding_up_panel 패키지를 사용하겠습니다. 다음과 같이 pubspec.yaml 파일에 패키지를 추가하세요.
dependencies:
  sliding_up_panel: ^1.0.3
  1. 앱의 홈 화면에 SlidingUpPanel 위젯을 추가합니다. 다음은 기본적인 사용 예시입니다.
import 'package:flutter/material.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('슬라이딩 패널 애니메이션'),
        ),
        body: SlidingUpPanel(
          panel: Center(
            child: Text('슬라이딩 패널'),
          ),
          body: Center(
            child: Text('메인 화면'),
          ),
        ),
      ),
    );
  }
}

위 코드에서는 panel 속성에 슬라이딩 패널의 콘텐츠를 설정하고, body 속성에 메인 화면의 콘텐츠를 설정하였습니다.

  1. 추가로 SlidingUpPanel 위젯을 사용해 세부적인 설정을 할 수 있습니다. 예를 들어 minHeightmaxHeight 속성을 사용하여 슬라이딩 패널의 최소 높이와 최대 높이를 지정할 수 있습니다.
SlidingUpPanel(
  panel: Center(
    child: Text('슬라이딩 패널'),
  ),
  body: Center(
    child: Text('메인 화면'),
  ),
  minHeight: 100.0, // 슬라이딩 패널의 최소 높이
  maxHeight: 500.0, // 슬라이딩 패널의 최대 높이
),

위 코드에서는 슬라이딩 패널의 최소 높이를 100.0으로, 최대 높이를 500.0으로 설정하였습니다.

결론

Flutter에서 슬라이딩 패널 애니메이션을 구현하는 방법에 대해 알아보았습니다. 이를 통해 사용자 친화적인 UI를 구현하고, 추가 정보나 메뉴를 제공할 수 있을 것입니다. 자세한 내용은 슬라이딩 패널 패키지의 문서를 참고하시기 바랍니다.