[flutter] 플러터 Stepper를 사용하여 사용자가 선택한 금액을 입력할 수 있는 계산기 애플리케이션을 만들어보자.

07 Dec 2023

flutter

플러터(Flutter)는 Google에서 개발한 사용자 인터페이스(UI)를 빌드하기 위한 소프트웨어 개발 킷입니다. 이번 블로그 포스트에서는 Flutter의 Stepper 위젯을 사용하여 사용자가 선택한 금액을 입력할 수 있는 계산기 애플리케이션을 만들어보겠습니다. Stepper 위젯은 여러 단계로 이루어진 작업을 수행할 때 사용됩니다.

1. 프로젝트 설정

먼저 Flutter 프로젝트를 생성하고 필요한 패키지를 설치해야 합니다. Flutter의 공식 문서에서 제공하는 설치 가이드를 참고하여 Flutter SDK를 설치하고 프로젝트를 생성하세요.

2. Stepper 위젯 추가

프로젝트가 생성되었다면, main.dart 파일을 열고 다음 코드를 추가합니다.

import 'package:flutter/material.dart';

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

class CalculatorApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Calculator',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CalculatorPage(),
    );
  }
}

class CalculatorPage extends StatefulWidget {
  @override
  _CalculatorPageState createState() => _CalculatorPageState();
}

class _CalculatorPageState extends State<CalculatorPage> {
  int _currentStep = 0;
  double _selectedAmount = 0;

  List<Step> _calculatorSteps = [
    Step(
      title: Text('Step 1'),
      content: Text('Select amount'),
      isActive: true,
    ),
    Step(
      title: Text('Step 2'),
      content: Text('Review and confirm'),
      isActive: false,
    ),
    Step(
      title: Text('Step 3'),
      content: Text('Success'),
      isActive: false,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Calculator'),
      ),
      body: Stepper(
        steps: _calculatorSteps,
        currentStep: _currentStep,
        onStepContinue: _handleStepContinue,
        onStepTapped: _handleStepTapped,
        onStepCancel: _handleStepCancel,
      ),
    );
  }

  void _handleStepContinue() {
    setState(() {
      if (_currentStep < _calculatorSteps.length - 1) {
        _currentStep += 1;
      }
    });
  }

  void _handleStepTapped(int step) {
    setState(() {
      _currentStep = step;
    });
  }

  void _handleStepCancel() {
    setState(() {
      if (_currentStep > 0) {
        _currentStep -= 1;
      }
    });
  }
}

위의 코드에서는 CalculatorApp 위젯과 CalculatorPage 위젯을 정의하고, Stepper 위젯을 CalculatorPage 위젯의 body로 추가합니다. Stepper 위젯은 steps와 currentStep을 설정하여 여러 단계를 나타냅니다. onStepContinue, onStepTapped, onStepCancel 등의 콜백 메소드를 설정하여 사용자의 상호 작용에 대응할 수 있습니다.

3. 금액 선택 단계 추가

다음으로, 사용자가 금액을 선택할 수 있는 단계를 추가해보겠습니다. CalculatorPage 위젯의 _calculatorSteps 리스트에 다음 코드를 추가합니다.

Step(
  title: Text('Step 1'),
  content: Column(
    children: [
      Text('Select amount'),
      SizedBox(height: 16),
      Slider(
        min: 0,
        max: 100,
        value: _selectedAmount,
        onChanged: (value) {
          setState(() {
            _selectedAmount = value;
          });
        },
      ),
      SizedBox(height: 16),
      Text('Selected Amount: $_selectedAmount'),
    ],
  ),
  isActive: _currentStep == 0,
),

위의 코드에서는 content 속성에 Column 위젯을 사용하여 여러 위젯을 수직으로 나열합니다. Slider 위젯을 사용하여 사용자가 금액을 선택할 수 있도록 하고, 선택된 금액을 출력하는 텍스트를 추가합니다.

4. 나머지 단계 추가

나머지 단계인 ‘Review and confirm’과 ‘Success’를 추가해봅시다. _calculatorSteps 리스트에 다음 코드를 추가합니다.

Step(
  title: Text('Step 2'),
  content: Text('Review and confirm'),
  isActive: _currentStep >= 1,
),
Step(
  title: Text('Step 3'),
  content: ElevatedButton(
    onPressed: () {
      // Perform calculation
      Navigator.of(context).push(MaterialPageRoute(builder: (context) => SuccessPage()));
    },
    child: Text('Calculate'),
  ),
  isActive: _currentStep == 2,
),

위의 코드에서는 ‘Review and confirm’ 단계에는 단순한 텍스트를, ‘Success’ 단계에는 계산을 수행하는 버튼을 추가했습니다. 계산 버튼을 클릭하면 Navigator를 사용하여 SuccessPage로 이동합니다.

5. Success 페이지 추가

마지막으로, SuccessPage 클래스를 정의하여 성공 페이지를 작성합니다.

class SuccessPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Success'),
      ),
      body: Center(
        child: Text(
          'Calculation successful!',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

SuccessPage는 Scaffold 위젯을 사용하여 앱 바와 본문을 갖고 있습니다. 본문에는 단순한 텍스트 위젯이 출력됩니다.

6. 실행하기

이제 프로젝트를 실행하여 계산기 애플리케이션을 확인해봅시다. Flutter SDK가 제대로 설치되어 있고, 모바일 기기 혹은 에뮬레이터가 연결되어 있어야 합니다. flutter run 명령어를 실행하여 앱을 실행할 수 있습니다.

이번 블로그 포스트에서는 Flutter의 Stepper 위젯을 사용하여 사용자가 선택한 금액을 입력할 수 있는 계산기 애플리케이션을 만들어보았습니다. Flutter의 다양한 위젯과 기능을 활용하면 보다 복잡한 애플리케이션을 개발할 수 있습니다.

참고 문서

Flutter 공식 문서