플러터에서 SlidingUpPanel 패키지 사용 방법과 옵션 정리

플러터(Flutter)에서는 SlidingUpPanel 패키지를 통해 간편하게 슬라이딩 업 패널을 구현할 수 있습니다.

이 패키지는 화면의 하단이나 상단에서 패널을 슬라이딩하여 추가적인 콘텐츠를 펼칠 수 있는 기능을 제공합니다.

이번 글에서는 SlidingUpPanel 패키지의 기본적인 사용 방법과 주요 옵션들을 알아보겠습니다.

1. SlidingUpPanel 패키지 설치

먼저, pubspec.yaml 파일에 SlidingUpPanel 패키지를 추가해야 합니다. 현재 최신 버전을 확인하여 설치해 주세요.

dependencies:
  sliding_up_panel: ^1.0.1

패키지를 설치한 후에는 flutter pub get 명령을 통해 의존성을 가져오세요.

2. SlidingUpPanel 기본 사용법

SlidingUpPanel을 사용하려면 Scaffold의 body로 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('SlidingUpPanel Example')),
        body: SlidingUpPanel(
          panel: Center(
            child: Text('This is the sliding panel'),
          ),
          collapsed: Container(
            color: Colors.blueGrey,
            child: Center(
              child: Text('This is the collapsed panel'),
            ),
          ),
          body: Center(
            child: Text('This is the main content'),
          ),
        ),
      ),
    );
  }
}

위 예제에서 SlidingUpPanel 위젯은 panel 속성으로 슬라이딩할 콘텐츠를, collapsed 속성으로 닫힌 상태에서 보일 콘텐츠를 정의합니다.

body 속성은 슬라이딩 패널이 없을 때의 메인 콘텐츠를 정의합니다.

3. SlidingUpPanel 주요 옵션

SlidingUpPanel은 다양한 옵션을 제공하여 사용자 정의할 수 있습니다. 몇 가지 주요 옵션들을 살펴보겠습니다.

• panel: 열린 상태의 패널에 표시될 위젯을 정의합니다.
• collapsed: 닫힌 상태의 패널에 표시될 위젯을 정의합니다.
• body: 슬라이딩 패널이 없을 때 표시될 메인 콘텐츠를 정의합니다.
• minHeight: 패널의 최소 높이를 설정합니다.
• maxHeight: 패널의 최대 높이를 설정합니다.
• isDraggable: 사용자가 패널을 드래그하여 열고 닫을 수 있는지 여부를 설정합니다.
• controller: 패널을 제어할 수 있는 컨트롤러를 정의합니다.

이 외에도 다양한 속성들이 있으며, 필요에 따라 공식 문서나 예제 코드를 참고하여 사용해 보세요.

4. 마무리

플러터에서 SlidingUpPanel 패키지를 사용하여 다양한 사용자 인터페이스를 구현할 수 있습니다.

위 예제와 옵션들을 활용하여 자신만의 슬라이딩 패널을 만들어보세요. 플러터의 다양한 기능과 조합하여 보다 더 멋진 애플리케이션을 개발할 수 있을 것입니다.

Happy coding!

 

 

 

수발가족을 위한 일기장 “나비일기장”

 

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

 

구글플레이 앱 배포의 시작! 비공개테스트 20명의 테스터모집을 위한 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release

 

카카오톡 오픈 채팅방

https://open.kakao.com/o/gsS8Jbzg