앱 개발 중 팝업 창이나 메시지 창을 구현해야 할 때가 있습니다. 이때 슬라이딩 패널을 이용하면 사용자가 필요할 때만 창을 보여줄 수 있어 유용합니다. 이번 블로그에서는 플러터를 사용하여 슬라이딩 패널 메시지 창을 구현하는 방법을 알아보겠습니다.
패키지 설치
먼저 sliding_up_panel 패키지를 설치해야 합니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가합니다.
dependencies:
sliding_up_panel: ^1.0.0
패키지 추가 후 flutter pub get 명령으로 패키지를 설치합니다.
슬라이딩 패널 구현
슬라이딩 패널을 구현하기 위해 먼저 SlidingUpPanel 위젯을 사용하겠습니다. 이 위젯은 body와 panel을 갖고 있으며, panel은 아래로 슬라이딩하여 보여지는 창입니다.
import 'package:flutter/material.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';
class SlidingPanelPage extends StatefulWidget {
@override
_SlidingPanelPageState createState() => _SlidingPanelPageState();
}
class _SlidingPanelPageState extends State<SlidingPanelPage> {
PanelController _panelController = PanelController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('슬라이딩 패널 메시지 창'),
),
body: SlidingUpPanel(
controller: _panelController,
minHeight: 0,
maxHeight: 500,
panelBuilder: (scrollController) => buildPanel(scrollController),
body: buildBody(),
),
);
}
Widget buildPanel(ScrollController scrollController) {
return ListView(
controller: scrollController,
children: [
ListTile(title: Text('슬라이딩 패널 메시지 1')),
ListTile(title: Text('슬라이딩 패널 메시지 2')),
ListTile(title: Text('슬라이딩 패널 메시지 3')),
],
);
}
Widget buildBody() {
return Center(
child: ElevatedButton(
child: Text('슬라이딩 패널 열기'),
onPressed: () {
_panelController.open();
},
),
);
}
}
위 코드는 SlidingUpPanel 위젯을 사용하여 슬라이딩 패널을 구현한 예시입니다. panelBuilder를 사용하여 패널의 내용을 구성할 수 있습니다. body는 패널이 보여지기 전에 보여지는 창입니다.
슬라이딩 패널 제어
PanelController를 사용하여 슬라이딩 패널을 제어할 수 있습니다. 위 코드에서는 _panelController를 SlidingUpPanel의 controller로 설정하였습니다. 패널을 열기 위해서는 _panelController.open() 메서드를 사용할 수 있습니다. 패널을 닫기 위해서는 _panelController.close() 메서드를 사용할 수 있습니다.
결론
이번 글에서는 플러터를 사용하여 슬라이딩 패널 메시지 창을 구현하는 방법을 알아보았습니다. sliding_up_panel 패키지를 이용하여 간편하게 슬라이딩 패널을 구현할 수 있습니다. 다양한 앱에서 팝업 창 또는 메시지 창을 구현해야 할 때 슬라이딩 패널을 사용해보세요.