이번 블로그 포스트에서는 플러터(Flutter) Stepper를 사용하여 휴대폰 용량을 선택할 수 있는 애플리케이션을 만들어보겠습니다. 사용자는 Stepper를 사용하여 원하는 용량을 선택하고 선택한 용량을 표시할 수 있습니다.

Stepper란?

Stepper는 특정 작업의 진행 상태를 나타내는 UI 요소입니다. 각 단계는 순차적으로 진행되며 사용자는 다음 단계로 이동하거나 이전 단계로 되돌아갈 수 있습니다. 이를 사용하여 휴대폰 용량을 선택하도록 만들어보겠습니다.

애플리케이션 디자인

먼저, 애플리케이션의 디자인부터 시작해보겠습니다. 다음과 같이 Stepper 위젯과 선택된 용량을 표시할 컨테이너 위젯을 가진 화면을 만들어보겠습니다.

import 'package:flutter/material.dart';

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

class PhoneStorageApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Phone Storage App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PhoneStorageScreen(),
    );
  }
}

class PhoneStorageScreen extends StatefulWidget {
  @override
  _PhoneStorageScreenState createState() => _PhoneStorageScreenState();
}

class _PhoneStorageScreenState extends State<PhoneStorageScreen> {
  int _selectedCapacity = 32;

  void _capacityChanged(int newValue) {
    setState(() {
      _selectedCapacity = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Phone Storage App'),
      ),
      body: Container(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Stepper(
              currentStep: _selectedCapacity ~/ 16,
              onStepContinue: () {},
              onStepCancel: () {},
              onStepTapped: (step) {
                _capacityChanged((step + 1) * 16);
              },
              steps: [
                Step(
                  title: Text('16GB'),
                  isActive: _selectedCapacity >= 16,
                ),
                Step(
                  title: Text('32GB'),
                  isActive: _selectedCapacity >= 32,
                ),
                Step(
                  title: Text('64GB'),
                  isActive: _selectedCapacity >= 64,
                ),
                Step(
                  title: Text('128GB'),
                  isActive: _selectedCapacity >= 128,
                ),
                Step(
                  title: Text('256GB'),
                  isActive: _selectedCapacity >= 256,
                ),
              ],
            ),
            SizedBox(height: 16),
            Text('Selected Capacity: $_selectedCapacity GB'),
          ],
        ),
      ),
    );
  }
}

위의 코드를 실행하면 Stepper를 사용하여 휴대폰 용량을 선택할 수 있는 애플리케이션이 나타납니다.

Stepper 구성 요소 설명

Step: 각 단계를 나타내는 위젯입니다. 각 단계에는 제목과 활성/비활성 상태가 있습니다. 용량 단계마다 Step 위젯을 생성하고 ‘isActive’ 속성을 사용하여 선택된 용량에 따라 활성/비활성 상태를 설정합니다.

onStepContinue: 다음 단계로 진행하는 콜백 함수입니다. 이번 예제에서는 사용하지 않으므로 빈 함수를 작성하였습니다.

onStepCancel: 이전 단계로 되돌아가는 콜백 함수입니다. 이번 예제에서도 사용하지 않으므로 빈 함수를 작성하였습니다.

onStepTapped: 단계를 탭했을 때 실행되는 콜백 함수입니다. 용량 단계를 선택하면 이 함수가 호출되고 선택된 용량을 업데이트합니다.

마치며

이번 블로그 포스트에서는 Flutter에서 Stepper를 사용하여 휴대폰 용량 선택 애플리케이션을 만들어보았습니다. Stepper를 사용하여 여러 단계를 간편하게 구현할 수 있습니다. 추가적으로 이 애플리케이션을 확장하여 다양한 기능을 추가해볼 수도 있습니다.

참고로 위의 코드는 Flutter 2.0 버전에서 동작함을 기준으로 작성되었습니다.

참고 자료:

• Flutter Stepper 위젯 문서