[flutter] 플러터 Stepper를 사용하여 날씨 온도 선택 기능이 있는 날씨 앱을 만들어보자.

07 Dec 2023

flutter

이번에는 플러터의 Stepper를 사용하여 날씨 앱에 온도 선택 기능을 추가해보겠습니다. Stepper 위젯은 사용자가 단계별로 값을 선택할 수 있도록 도와줍니다. 이 예제에서는 온도를 선택하는 기능을 구현할 것입니다.

1. Stepper 위젯 추가하기

먼저, Stepper 위젯을 화면에 추가해야 합니다. 다음과 같이 코드를 작성해주세요:

import 'package:flutter/material.dart';

class WeatherApp extends StatefulWidget {
  @override
  _WeatherAppState createState() => _WeatherAppState();
}

class _WeatherAppState extends State<WeatherApp> {
  int _currentStep = 0;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('날씨 앱'),
      ),
      body: Stepper(
        currentStep: _currentStep,
        onStepContinue: () {
          setState(() {
            if (_currentStep < 3) {
              _currentStep++;
            } else {
              // 모든 단계가 완료됨
            }
          });
        },
        onStepCancel: () {
          setState(() {
            if (_currentStep > 0) {
              _currentStep--;
            } else {
              // 첫 번째 단계에서 더 이전으로 갈 수 없음
            }
          });
        },
        steps: [
          Step(
            title: Text('온도 선택'),
            content: Column(
              children: [
                Text('지금의 온도를 선택해주세요.'),
                // 온도 선택 위젯을 추가하는 부분
              ],
            ),
          ),
          Step(
            title: Text('날씨 상황'),
            content: Column(
              children: [
                Text('현재의 날씨 상황을 선택해주세요.'),
                // 날씨 상황 선택 위젯을 추가하는 부분
              ],
            ),
          ),
          Step(
            title: Text('옷차림 추천'),
            content: Column(
              children: [
                Text('추천되는 옷차림을 확인해보세요.'),
                // 추천 옷차림 확인 위젯을 추가하는 부분
              ],
            ),
          ),
        ],
      ),
    );
  }
}

위 코드에서 Stepper 위젯은 현재 선택된 단계(currentStep)를 기반으로 다음 단계로 진행하거나 이전 단계로 돌아갈 수 있도록 합니다. 각 단계는 제목(title)과 내용(content)으로 구성됩니다.

2. 온도 선택 위젯 추가하기

이제 온도 선택 단계에서 온도를 선택할 수 있는 위젯을 추가해보겠습니다. 아래 코드를 추가해주세요:

// 온도 선택 위젯 코드 예시
int _currentTemperature = 20;

Slider(
  value: _currentTemperature.toDouble(),
  onChanged: (double value) {
    setState(() {
      _currentTemperature = value.round();
    });
  },
  min: 0,
  max: 40,
  divisions: 40,
  label: '$_currentTemperature°C',
),

위 코드는 Slider 위젯을 사용하여 온도를 선택할 수 있도록 합니다. value 속성은 현재 온도를 나타내며, onChanged 콜백은 온도가 변경될 때마다 호출됩니다. min, max, divisions는 각각 슬라이더의 최소값, 최대값, 구간 수를 설정합니다. label은 슬라이더 옆에 표시될 온도 값입니다.

3. 날씨 상황 선택 위젯 추가하기

다음으로 날씨 상황 단계에서 날씨 상황을 선택할 수 있는 위젯을 추가해보겠습니다. 아래 코드를 추가해주세요:

// 날씨 상황 선택 위젯 코드 예시
String _currentWeatherCondition = '맑음';

DropdownButton<String>(
  value: _currentWeatherCondition,
  onChanged: (String newValue) {
    setState(() {
      _currentWeatherCondition = newValue;
    });
  },
  items: <String>['맑음', '흐림', '비', '눈'].map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
),

위 코드는 DropdownButton 위젯을 사용하여 날씨 상황을 선택할 수 있도록 합니다. value 속성은 현재 선택된 날씨 상황을 나타내며, onChanged 콜백은 선택이 변경될 때마다 호출됩니다. items 속성에서는 선택 가능한 모든 날씨 상황을 정의하고 텍스트로 표시합니다.

4. 추천 옷차림 확인 위젯 추가하기

마지막으로 옷차림 추천 단계에서 추천되는 옷차림을 확인할 수 있는 위젯을 추가해보겠습니다. 이 부분은 상황에 따라 추가적인 로직이 필요하므로, 원하는 로직에 맞게 구현하시면 됩니다.

// 추천 옷차림 확인 위젯 코드 예시
String recommendedOutfit = getRecommendedOutfit(_currentTemperature, _currentWeatherCondition);

Text('추천 옷차림: $recommendedOutfit'),

위 코드는 getRecommendedOutfit 함수를 호출하여 현재 선택된 온도와 날씨 상황에 따라 추천되는 옷차림을 가져오고, 텍스트로 표시합니다.

5. 실행해보기

위의 코드를 모두 추가한 후, WeatherApp 클래스를 실행해보세요. Stepper 위젯을 통해 온도 선택, 날씨 상황 선택, 추천 옷차림 확인까지 단계적으로 진행할 수 있습니다.

이제 플러터의 Stepper를 사용하여 날씨 온도 선택 기능이 있는 날씨 앱을 만들어보았습니다. 이 예제를 기반으로 다양한 기능을 추가해보세요. 플러터의 다른 위젯과 함께 사용하면 더 많은 기능을 구현할 수 있습니다.

참고 자료: