[flutter] 플러터 슬라이딩 패널 댓글 보기

플러터(Flutter)는 사용자들에게 멋진 UI와 좋은 사용자 경험을 제공하기 위해 다양한 위젯을 제공합니다. 그 중 하나인 ‘슬라이딩 패널(Sliding Panel)’을 사용하면 앱 내에서 다른 화면을 슬라이드하여 보여줄 수 있습니다.

이번 블로그 포스트에서는 플러터의 슬라이딩 패널을 사용하여 댓글을 보여주는 기능을 구현하는 방법을 알아보겠습니다.

1. 패키지 설치

먼저, 슬라이딩 패널을 구현하기 위해 ‘flutter_sliding_panel’ 패키지를 설치해야 합니다. 이 패키지는 플러터 앱에서 슬라이딩 패널을 쉽게 구현할 수 있는 기능을 제공합니다.

터미널 또는 명령 프롬프트에서 다음 명령어를 실행하여 패키지를 설치합니다:

flutter pub add flutter_sliding_panel

2. 슬라이딩 패널 구현

이제 슬라이딩 패널을 구현해보겠습니다.

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

class CommentPanel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('댓글'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            SlidingPanel.show(
              context,
              isDraggable: true, // 슬라이드 가능 여부
              snapBehavior: PanelSnapBehavior.snapToExtent, // 패널 위치 고정
              panelSize: PanelSize(full: true), // 패널 크기 설정
              builder: (context, scrollController) {
                // 패널 내용 구현
                return ListView.builder(
                  controller: scrollController,
                  itemCount: 20,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text('댓글 $index'),
                    );
                  },
                );
              },
            );
          },
          child: Text('댓글 보기'),
        ),
      ),
    );
  }
}

위 코드에서는 CommentPanel이라는 StatefulWidget을 정의하고 onPressed 콜백 함수에서 SlidingPanel.show를 호출하여 슬라이딩 패널을 표시합니다. 패널 내용은 builder 함수로 구현하며, 위 예제에서는 20개의 댓글을 ListView로 표시하도록 설정하였습니다.

3. 사용하기

CommentPanel 위젯을 다른 화면에서 사용하려면 해당 화면으로 이동할 수 있도록 네비게이션을 설정해야 합니다. 예를 들어, 메인 화면에서 CommentPanel을 사용하려면 다음과 같은 코드를 작성할 수 있습니다:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '슬라이딩 패널 예제',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('슬라이딩 패널 예제'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => CommentPanel()),
            );
          },
          child: Text('댓글 보기'),
        ),
      ),
    );
  }
}

이렇게 하면 ‘댓글 보기’ 버튼을 누르면 CommentPanel이 있는 화면으로 이동하여 댓글을 슬라이딩 패널로 확인할 수 있습니다.

결론

이번 포스트에서는 플러터의 슬라이딩 패널을 사용하여 댓글을 보여주는 기능을 구현하는 방법을 알아보았습니다. 슬라이딩 패널을 사용하면 앱에서 다른 화면을 간편하게 보여줄 수 있으며, 사용자들에게 더 편리하고 직관적인 경험을 제공할 수 있습니다.