[flutter] 플러터 Stepper를 사용하여 사용자가 선택한 온도를 변환하는 기능이 있는 온도 변환기 애플리케이션을 만들어보자.

07 Dec 2023

flutter

이번 튜토리얼에서는 플러터(Flutter)의 Stepper(스테퍼) 위젯을 사용하여 사용자가 선택한 온도를 변환하는 애플리케이션을 만들어보겠습니다.

1. Stepper 위젯 이해하기

Stepper 위젯은 사용자가 단계적으로 값을 선택하도록 도와주는 위젯입니다. 각 단계는 숫자와 제목으로 나타나며, 사용자는 버튼을 통해 값을 증감시킬 수 있습니다.

2. 온도 변환 애플리케이션 디자인하기

온도 변환 애플리케이션은 두 가지 단계로 구성됩니다. 첫 번째 단계에서는 사용자가 변환할 온도 유형과 값을 선택하고, 두 번째 단계에서는 선택한 온도 값을 변환하여 보여줍니다.

애플리케이션의 디자인은 다음과 같이 구성될 수 있습니다:

Step 1: 온도 유형 선택
 온도 유형: (섭씨 / 화씨)
 온도 값: [ ] (버튼을 통해 증감 가능)

Step 2: 온도 변환 결과
 변환 결과: [변환된 온도 값]

3. Flutter 프로젝트 생성 및 기본 구조 설정하기

먼저, Flutter 프로젝트를 생성하고 기본 구조를 설정합니다. Flutter 프로젝트 생성 방법에 대한 자세한 내용은 공식 문서를 참고하세요.

4. Stepper 위젯을 사용하여 온도 변환 애플리케이션 구현하기

4.1 main.dart 파일을 열고 다음 코드로 수정합니다:

import 'package:flutter/material.dart';

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

class TemperatureConverterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Temperature Converter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: TemperatureConverterScreen(),
    );
  }
}

class TemperatureConverterScreen extends StatefulWidget {
  @override
  _TemperatureConverterScreenState createState() =>
      _TemperatureConverterScreenState();
}

class _TemperatureConverterScreenState extends State<TemperatureConverterScreen> {
  int currentStep = 0;
  double temperatureValue = 0.0;

  List<Step> steps = [
    Step(
      title: Text('온도 유형 선택'),
      content: Column(
        children: [
          Text('온도 유형:'),
          RadioListTile(
            title: Text('섭씨'),
            value: 'celsius',
            groupValue: 'temperatureType',
            onChanged: (value) {},
          ),
          RadioListTile(
            title: Text('화씨'),
            value: 'fahrenheit',
            groupValue: 'temperatureType',
            onChanged: (value) {},
          ),
          TextFormField(
            keyboardType: TextInputType.number,
            onChanged: (value) {
              setState(() {
                temperatureValue = double.parse(value);
              });
            },
          ),
        ],
      ),
      isActive: true,
    ),
    Step(
      title: Text('온도 변환 결과'),
      content: Column(
        children: [
          Text('변환 결과:'),
          Text('변환된 온도 값'),
        ],
      ),
      isActive: false,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Temperature Converter'),
      ),
      body: Stepper(
        currentStep: currentStep,
        steps: steps,
        onStepContinue: () {
          setState(() {
            currentStep < steps.length - 1 ? currentStep++ : currentStep = 0;
          });
        },
        onStepCancel: () {
          setState(() {
            currentStep > 0 ? currentStep-- : currentStep = 0;
          });
        },
        onStepTapped: (step) {
          setState(() {
            currentStep = step;
          });
        },
      ),
    );
  }
}

4.2 애플리케이션을 실행해보세요. 현재 단계(Step)에 따라 온도 유형 선택과 값 입력을 할 수 있습니다.

4.3 이제 각 단계에서 사용자의 입력을 처리하고, 두 번째 단계에서 변환 결과를 계산하여 보여줄 수 있도록 애플리케이션을 완성하세요.

5. 결론

플러터(Flutter)의 Stepper(스테퍼) 위젯을 사용하여 사용자가 선택한 온도를 변환하는 애플리케이션을 만들어보았습니다. Stepper 위젯을 활용하면 복잡한 사용자 입력 프로세스를 단계별로 나누어 다룰 수 있습니다.

더 많은 정보를 원한다면 공식 플러터 문서를 참고하세요.