[flutter] 플러터(expandable)을 사용하는 전자상거래 앱 개발 방법

04 Dec 2023

flutter

전자상거래 앱을 개발할 때, 사용자가 카테고리나 상품 리스트를 더 자세히 볼 수 있도록 확장 가능한 컴포넌트를 사용하는 것은 일반적인 요구사항입니다. 이번 기술 블로그에서는 플러터(Flutter)에서 확장 가능한(expandable) 컴포넌트를 사용하여 전자상거래 앱을 개발하는 방법을 살펴보겠습니다.

1. 플러터(expandable) 패키지 설치

플러터(expandable) 패키지를 사용하기 위해 먼저 pubspec.yaml 파일에 의존성(Dependency)을 추가해야 합니다. 다음과 같이 패키지를 추가합니다:

dependencies:
  expandable: ^5.0.0

프로젝트 루트 폴더에서 flutter pub get 명령을 실행하여 패키지를 다운로드 및 설치해줍니다.

2. 확장 가능한(expandable) 위젯 구현

이제 플러터(expandable) 패키지를 사용하여 확장 가능한(expandable) 위젯을 구현할 수 있습니다. ExpandableNotifier, Expandable 및 ExpandableButton 위젯을 사용하여 구현합니다.

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

class ExpandableProduct extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ExpandableNotifier(
      child: ScrollOnExpand(
        child: ExpandablePanel(
          theme: const ExpandableThemeData(
            headerAlignment: ExpandablePanelHeaderAlignment.center,
            tapBodyToCollapse: true,
          ),
          header: Container(
            color: Colors.grey[200],
            child: Padding(
              padding: EdgeInsets.all(10),
              child: ExpandableButton(
                child: Text(
                  '상품 정보',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
          ),
          expanded: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('상품명: iPhone 12'),
              Text('가격: 1,000,000원'),
              Text('품질: A+ 등급'),
              // ... 추가적인 상품 정보
            ],
          ),
        ),
      ),
    );
  }
}

위의 코드에서 ExpandableProduct 위젯은 확장 가능한(expandable) 위젯을 정의합니다. ScrollOnExpand 위젯은 위젯이 확장되면 스크롤 기능을 제공하며, ExpandablePanel은 실제로 위젯이 확장될 때의 레이아웃과 내용을 정의합니다. header 위젯을 터치하면 위젯이 확장되거나 축소됩니다.

3. 전자상거래 앱에 확장 가능한(expandable) 위젯 적용

이제 전자상거래 앱의 카테고리 또는 상품 리스트에 위에서 구현한 ExpandableProduct 위젯을 적용합니다.

import 'package:flutter/material.dart';

class ECommerceApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('전자상거래 앱'),
      ),
      body: ListView.builder(
        itemCount: products.length,
        itemBuilder: (BuildContext context, int index) {
          return ExpandableProduct();
        },
      ),
    );
  }
}

위의 코드에서 ECommerceApp은 전자상거래 앱을 정의하는 위젯입니다. ListView.builder를 사용하여 카테고리 또는 상품 리스트를 동적으로 표시하고, 각 상품에 ExpandableProduct 위젯을 포함하도록 구성합니다.

결론

이번 기술 블로그에서는 플러터(expandable) 패키지를 사용하여 전자상거래 앱에서 확장 가능한(expandable) 컴포넌트를 개발하는 방법을 알아보았습니다. 이러한 확장 가능한 컴포넌트를 사용하면 사용자에게 더 나은 사용자 경험을 제공할 수 있고, 전자상거래 앱의 가독성과 유연성을 높일 수 있습니다.

더 자세한 내용은 플러터(expandable) 패키지 문서를 참고하세요.