[flutter] 플러터 Stepper를 사용하여 사용자가 선택한 가격 범위에 해당하는 상품을 필터링하는 전자상거래 애플리케이션을 만들어보자.

07 Dec 2023

flutter

안녕하세요! 이번에는 플러터(Flutter)의 Stepper 위젯을 사용하여 사용자가 선택한 가격 범위에 해당하는 상품을 필터링하는 전자상거래 애플리케이션을 만들어보도록 하겠습니다.

애플리케이션 개요

이 애플리케이션은 사용자로부터 최솟값과 최댓값을 입력받아 해당 가격 범위에 속하는 상품들만 보여주는 전자상거래 애플리케이션입니다. Stepper 위젯을 사용하여 최솟값과 최댓값을 선택할 수 있도록 구현할 예정입니다.

Stepper 위젯

Stepper 위젯은 사용자가 값을 증가 또는 감소시킬 수 있는 상호작용적인 UI를 제공하는 위젯입니다. 보통 숫자, 단계 또는 페이지 번호를 선택할 때 사용합니다. Stepper 위젯은 steps 속성을 통해 여러 단계를 정의하고 onStepContinue 및 onStepCancel 콜백을 통해 단계 이동에 대한 동작을 정의할 수 있습니다.

가격 필터링 애플리케이션 구현

아래는 가격 필터링 애플리케이션을 구현하는 코드입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(FilterApp());
}

class FilterApp extends StatefulWidget {
  @override
  _FilterAppState createState() => _FilterAppState();
}

class _FilterAppState extends State<FilterApp> {
  int _currentStep = 0;
  double _minPrice = 0.0;
  double _maxPrice = 100.0;

  List<Step> _filterSteps = [
    Step(
      title: Text('가격'), 
      content: Column(
        children: [
          Text('최솟값: $_minPrice'),
          Slider(
            value: _minPrice, 
            onChanged: (value) {
              setState(() {
                _minPrice = value;
              });
            },
            min: 0.0, 
            max: 100.0,
          ),
          Text('최댓값: $_maxPrice'),
          Slider(
            value: _maxPrice, 
            onChanged: (value) {
              setState(() {
                _maxPrice = value;
              });
            },
            min: 0.0,
            max: 100.0,
          ),
        ],
      ),
    ),
    Step(
      title: Text('필터링 결과'),
      content: Column(
        children: [
          Text('최솟값: $_minPrice'),
          Text('최댓값: $_maxPrice'),
          // 실제로는 필터링된 상품들을 보여주는 로직이 추가되어야 합니다.
        ],
      ),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('가격 필터링'),
        ),
        body: Stepper(
          currentStep: _currentStep,
          steps: _filterSteps,
          onStepContinue: () {
            setState(() {
              if (_currentStep < _filterSteps.length - 1) {
                _currentStep++;
              } else {
                // 마지막 단계에서는 실제로 필터링된 상품들을 보여주는 로직이 추가되어야 합니다.
              }
            });
          },
          onStepCancel: () {
            setState(() {
              if (_currentStep > 0) {
                _currentStep--;
              }
            });
          },
        ),
      ),
    );
  }
}

위 코드에서는 _minPrice와 _maxPrice 변수를 사용하여 최솟값과 최댓값을 저장하고, Slider 위젯을 사용하여 값을 선택할 수 있도록 구현했습니다. 실제로 필터링된 상품들을 보여주는 로직은 아직 추가되지 않았습니다.

결론

이번에는 플러터의 Stepper 위젯을 사용하여 가격 필터링 애플리케이션을 구현해보았습니다. 이제 필요한 로직을 추가하여 실제로 상품을 필터링하고 보여주는 기능을 개발할 수 있습니다. Stepper 위젯은 사용자로부터 값을 선택하거나 단계별로 진행되어야 하는 상황에서 유용하게 활용할 수 있습니다.

목차

애플리케이션 개요

Stepper 위젯

가격 필터링 애플리케이션 구현

결론