[flutter] 플러터 슬라이딩 패널 장바구니

플러터(Flutter)는 Google에서 개발한 모바일 앱 개발 프레임워크로, 다양한 플랫폼에서 동일한 코드로 앱을 개발할 수 있는 장점을 가지고 있습니다. 이번 블로그 포스트에서는 플러터의 슬라이딩 패널을 이용하여 장바구니 기능을 구현하는 방법을 알아보겠습니다.

1. 패키지 설치하기

먼저, 프로젝트에 슬라이딩 패널을 사용하기 위해 sliding_up_panel 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가해주세요:

dependencies:
  flutter:
    sdk: flutter
    
  sliding_up_panel: ^1.0.3

설정이 완료되면 패키지를 다운로드하고 프로젝트에 적용하기 위해 flutter packages get 명령어를 실행해주세요.

2. 슬라이딩 패널 구현하기

장바구니 슬라이딩 패널을 만들기 위해 SlidingUpPanel 위젯을 사용할 것입니다. 먼저, SlidingUpPanel을 구현하기 위해 페이지 최상단에 ControllerPanel 위젯을 추가합니다:

import 'package:sliding_up_panel/sliding_up_panel.dart';

class CartPage extends StatefulWidget {
  @override
  _CartPageState createState() => _CartPageState();
}

class _CartPageState extends State<CartPage> {
  PanelController _panelController = PanelController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('장바구니'),
      ),
      body: SlidingUpPanel(
        controller: _panelController,
        minHeight: 50,
        maxHeight: MediaQuery.of(context).size.height,
        panelBuilder: (scrollController) => _buildPanel(scrollController),
        body: _buildContent(),
      ),
    );
  }

  Widget _buildPanel(ScrollController scrollController) {
    // 슬라이딩 패널 구현 코드 작성
  }

  Widget _buildContent() {
    // 장바구니 콘텐츠 구현 코드 작성
  }
}

SlidingUpPanel 위젯의 panelBuilder 속성에는 패널에 표시될 내용을 구현하는 위젯을 반환하는 콜백 메서드를 작성해야 합니다. 마찬가지로 body 속성에는 패널이 닫혔을 때 보여줄 내용을 반환하는 메서드를 작성해야 합니다.

3. 슬라이딩 패널 내용 구현하기

슬라이딩 패널 안에는 장바구니에 담긴 아이템 목록과 결제 정보 등을 표시해야 합니다. 예를 들어, 다음과 같이 패널에 표시될 위젯을 작성할 수 있습니다:

Widget _buildPanel(ScrollController scrollController) {
  return ListView(
    controller: scrollController,
    children: [
      ListTile(
        leading: Icon(Icons.shopping_cart),
        title: Text('상품 1'),
        trailing: IconButton(
          icon: Icon(Icons.delete),
          onPressed: () {
            // 상품을 장바구니에서 삭제하는 코드 작성
          },
        ),
      ),
      // 다른 상품들을 표시하는 ListTile들 추가
    ],
  );
}

위 예시에서는 ListView를 사용하여 패널에 표시될 아이템 목록을 구현하였습니다. ListTile 위젯을 사용하여 인덱스와 상품 이름을 표시하고, 우측의 삭제 버튼을 눌러 해당 상품을 삭제할 수 있도록 구현하였습니다.

4. 장바구니 콘텐츠 구현하기

장바구니 콘텐츠는 패널이 닫혔을 때 보여지는 화면입니다. 예를 들어, 다음과 같이 패널이 닫혔을 때 보여질 내용을 작성할 수 있습니다:

Widget _buildContent() {
  return Column(
    children: [
      Text('장바구니 비어있음'),
      RaisedButton(
        child: Text('상품 추가'),
        onPressed: () {
          // 다른 페이지로 이동하여 상품을 추가하는 코드 작성
        },
      ),
    ],
  );
}

위 예시에서는 Column을 사용하여 장바구니 비어있음 메시지와 상품 추가 버튼을 구현하였습니다. 상품 추가 버튼을 누르면 다른 페이지로 이동하여 상품을 추가할 수 있도록 추가 코드를 작성해주어야 합니다.

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

패널의 열고 닫음을 제어하기 위해 _panelController를 사용할 수 있습니다. 예를 들어, 장바구니 아이콘을 눌러 패널을 열고 닫을 수 있도록 다음과 같이 코드를 작성할 수 있습니다:

AppBar(
  title: Text('장바구니'),
  actions: [
    IconButton(
      icon: Icon(Icons.shopping_cart),
      onPressed: () {
        if (_panelController.isPanelOpen) {
          _panelController.close();
        } else {
          _panelController.open();
        }
      },
    ),
  ],
),

위 예시에서는 IconButton을 사용하여 장바구니 아이콘을 추가하고, onPressed 콜백에서 패널의 상태에 따라 열고 닫는 메서드를 호출하도록 구현하였습니다.

결론

이렇게하면 플러터를 사용하여 슬라이딩 패널을 통해 장바구니를 구현할 수 있습니다. SlidingUpPanel을 이용하면 사용자가 아이템을 추가하고 삭제하는 등의 기능을 제공할 수 있으며, 사용자 친화적인 인터페이스를 제공할 수 있습니다. 추가로 디자인이나 기능을 개선하여 보다 사용자에게 편리한 장바구니를 만들 수도 있습니다.