[flutter] 플러터 슬라이딩 패널 디자인

슬라이딩 패널은 애플리케이션을 보다 사용자 친화적이고 효과적으로 만들어주는 중요한 요소입니다. 플러터(Flutter)를 사용하여 슬라이딩 패널을 디자인하는 방법을 알아보겠습니다.

1. SlidingUpPanel 패키지 설치

우선, 슬라이딩 패널을 생성하기 위해 sliding_up_panel 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다:

dependencies:
  sliding_up_panel: ^2.0.0

설치가 완료되면 패키지를 가져와야 합니다:

import 'package:sliding_up_panel/sliding_up_panel.dart';

2. SlidingUpPanel 위젯 구성

SlidingUpPanel 위젯을 사용하여 슬라이딩 패널을 구성할 수 있습니다. 아래 예제 코드를 참고하세요:

SlidingUpPanel(
  panelBuilder: (scrollController) => _buildPanel(scrollController),
  body: _buildBody(),
  minHeight: 100,
  maxHeight: 500,
)

3. 패널 내용 구성하기

panelBuilder 콜백 함수에서 실제 패널 내용을 구성하는 위젯을 반환해야 합니다. 스크롤 동작에 대한 제어를 위해 scrollController를 인자로 받을 수 있습니다. 아래 예제 코드는 패널 내용을 구성하는 위젯을 반환하는 _buildPanel 함수의 예입니다:

Widget _buildPanel(ScrollController scrollController) {
  return ListView(
    controller: scrollController,
    children: [
      ListTile(
        title: Text('패널 아이템 1'),
      ),
      ListTile(
        title: Text('패널 아이템 2'),
      ),
      ListTile(
        title: Text('패널 아이템 3'),
      ),
      // ...
    ],
  );
}

4. 본문 내용 구성하기

body 위젯으로 표시될 본문 내용을 구성하는 위젯을 반환해야 합니다. 아래 예제 코드는 간단한 텍스트를 포함하는 _buildBody 함수의 예입니다:

Widget _buildBody() {
  return Center(
    child: Text('슬라이딩 패널 예제'),
  );
}

5. 전체 코드 예시

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(
      title: 'Sliding Panel Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SlidingPanelExample(),
    );
  }
}

class SlidingPanelExample extends StatefulWidget {
  @override
  _SlidingPanelExampleState createState() => _SlidingPanelExampleState();
}

class _SlidingPanelExampleState extends State<SlidingPanelExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sliding Panel Example'),
      ),
      body: SlidingUpPanel(
        panelBuilder: (scrollController) => _buildPanel(scrollController),
        body: _buildBody(),
        minHeight: 100,
        maxHeight: 500,
      ),
    );
  }

  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: Text('슬라이딩 패널 예제'),
    );
  }
}

참고 자료