[flutter] 플러터 슬라이딩 패널 앨범 뷰

플러터(Flutter)는 Google에서 개발한 모바일 애플리케이션 개발 프레임워크로, 다양한 플랫폼에서 동작하는 애플리케이션을 빠르고 쉽게 만들 수 있습니다. 이번에는 플러터를 사용하여 슬라이딩 패널 앨범 뷰를 만들어보겠습니다.

1. 슬라이딩 패널 생성

먼저, flutter_sliding_panel 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  flutter_sliding_panel: ^0.1.2

그런 다음, main.dart 파일에서 패키지를 import합니다:

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

슬라이딩 패널을 사용하기 위해 SlidingPanel 위젯을 생성합니다:

class AlbumView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sliding Panel Album View'),
      ),
      body: SlidingPanel(
        panelController: PanelController(),
        panelBuilder: (ScrollController sc) {
          return SingleChildScrollView(
            controller: sc,
            child: Column(
              children: [
                // 앨범 컨텐츠 추가
              ],
            ),
          );
        },
        collapsedPanelBuilder: (ScrollController sc) {
          return Container(
            height: 120,
            color: Colors.grey[300],
            child: Center(
              child: Text('Collapsible Panel'),
            ),
          );
        },
      ),
    );
  }
}

SlidingPanel 위젯은 panelBuildercollapsedPanelBuilder 콜백 함수를 통해 패널의 내용을 정의합니다. panelBuilder에서는 스크롤이 가능한 앨범 뷰를 만들고, collapsedPanelBuilder에서는 축소된 상태의 패널을 만들 수 있습니다.

2. 앨범 컨텐츠 추가

SlidingPanelpanelBuilder에서 앨범 컨텐츠를 추가해봅시다. 예시로 GridView 위젯을 사용하여 앨범 사진들을 표시해보겠습니다:

panelBuilder: (ScrollController sc) {
  return SingleChildScrollView(
    controller: sc,
    child: Column(
      children: [
        GridView.count(
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          crossAxisCount: 2,
          children: List.generate(
            12,
            (index) => Container(
              padding: EdgeInsets.all(8),
              child: Image.asset('assets/images/album_$index.jpg'),
            ),
          ),
        ),
      ],
    ),
  );
},

위 코드에서 GridView 위젯을 사용하여 crossAxisCount를 2로 설정하여 2열로 앨범 사진들을 표시하였습니다.

3. 패널 상태 변경

SlidingPanel은 사용자가 화면에서 위로 스와이프하면 전체화면 패널로 확장되거나, 아래로 스와이프하면 축소된 패널로 변환됩니다. 이 상태 변환을 사용자의 터치나 버튼을 통해 제어할 수 있습니다.

SlidingPanelpanelController 속성을 생성하고, 다음과 같이 패널 상태를 조작할 수 있습니다:

class AlbumView extends StatelessWidget {
  final PanelController _panelController = PanelController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sliding Panel Album View'),
      ),
      body: SlidingPanel(
        panelController: _panelController,
        panelBuilder: (ScrollController sc) {
          // ...
        },
        collapsedPanelBuilder: (ScrollController sc) {
          // ...
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (_panelController.isPanelCollapsed) {
            _panelController.expand();
          } else {
            _panelController.collapse();
          }
        },
        child: Icon(Icons.arrow_upward),
      ),
    );
  }
}

_panelControllerSlidingPanelpanelController 속성에 할당하고, floatingActionButton을 추가하여 패널 상태를 전환할 수 있도록 구현하였습니다.

이제 플러터에서 슬라이딩 패널 앨범 뷰를 생성하고 사용할 수 있습니다. 추가적인 기능이나 디자인 요구에 따라서 코드를 수정하고 개선할 수 있습니다.

참고 자료