[flutter] 플러터 슬라이딩 패널 쇼핑 카트

플러터는 사용자 인터페이스를 빠르게 개발할 수 있는 크로스 플랫폼 프레임워크입니다. 이번에는 플러터를 사용하여 슬라이딩 패널 쇼핑 카트를 구현하는 방법에 대해 알아보겠습니다.

1. 패키지 설치

먼저, 플러터 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음 의존성을 추가하세요.

dependencies:
  sliding_up_panel: ^1.0.3

그리고 패키지를 가져옵니다.

import 'package:sliding_up_panel/sliding_up_panel.dart';

2. 슬라이딩 패널 생성하기

슬라이딩 패널은 SlidingUpPanel 위젯으로 생성할 수 있습니다. 이 위젯은 두 개의 자식 위젯을 가질 수 있습니다. 첫 번째 자식은 메인 콘텐츠이고, 두 번째 자식은 슬라이드될 패널 콘텐츠입니다.

SlidingUpPanel(
  panel: Center(
    child: Text('슬라이드될 콘텐츠'),
  ),
  body: Center(
    child: Text('메인 콘텐츠'),
  ),
)

3. 슬라이딩 패널 제어하기

슬라이딩 패널의 상태를 제어하려면 panelController를 사용해야 합니다. 이를 통해 패널을 열거나 닫을 수 있습니다.

SlidingUpPanelController panelController = SlidingUpPanelController();

SlidingUpPanel(
  controller: panelController,
  panel: Center(
    child: Text('슬라이드될 콘텐츠'),
  ),
  body: Center(
    child: RaisedButton(
      child: Text('패널 열기'),
      onPressed: () => panelController.open(),
    ),
  ),
)

다음과 같이 패널을 열거나 닫을 수 있습니다.

panelController.open();    // 패널 열기
panelController.close();   // 패널 닫기

4. 추가 기능 구현하기

슬라이딩 패널 쇼핑 카트에는 동적으로 아이템을 추가하고 제거해야 합니다. 이를 위해 ListView를 사용할 수 있습니다.

ListView.builder(
  itemCount: cart.length,
  itemBuilder: (context, index) {
    final item = cart[index];
    return ListTile(
      title: Text(item.name),
      trailing: IconButton(
        icon: Icon(Icons.remove),
        onPressed: () {
          setState(() {
            cart.removeAt(index);
          });
        },
      ),
    );
  },
)

위 예제에서 cart는 카트에 있는 아이템의 목록을 의미합니다. IconButton을 클릭하여 아이템을 제거할 수 있습니다.

마치며

위와 같은 방법으로 플러터의 슬라이딩 패널을 이용하여 쇼핑 카트를 구현할 수 있습니다. 이를 응용하여 다양한 기능을 추가하거나 디자인을 변경할 수 있습니다. 더 자세한 사항은 슬라이딩 패널(영문)을 참조하세요.