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

07 Dec 2023

flutter

이 튜토리얼에서는 Flutter의 Stepper 위젯을 사용하여 사용자가 선택한 거리를 측정하는 간단한 거리 측정기 애플리케이션을 만들어보겠습니다.

1. 개요

이 애플리케이션은 사용자가 거리를 선택하고, 선택한 거리를 측정하는 간단한 기능을 가지고 있습니다. 사용자는 Stepper 위젯을 사용하여 특정 거리 값을 선택할 수 있으며, 선택한 거리는 애플리케이션에서 측정되어 출력됩니다.

2. 프로젝트 설정

Flutter SDK가 설치되어 있는지 확인한 후, 새로운 Flutter 프로젝트를 생성합니다. 프로젝트를 생성하는 방법은 공식 문서를 참조하세요.

3. UI 레이아웃 구성

우선 애플리케이션의 UI를 구성하기 위해 MaterialApp 위젯을 사용하여 기본 테마를 설정합니다. 그리고 Scaffold 위젯을 사용하여 앱의 기본 레이아웃을 구성합니다.

import 'package:flutter/material.dart';

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

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

class DistancePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Distance App'),
      ),
      body: Container(
        width: double.infinity,
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // UI components will be here
          ],
        ),
      ),
    );
  }
}

4. Stepper 위젯 적용

사용자가 거리를 선택할 수 있도록 Stepper 위젯을 추가해보겠습니다. Stepper 위젯은 목록 형식으로 순차적인 단계를 보여줍니다.

class DistancePage extends StatefulWidget {
  @override
  _DistancePageState createState() => _DistancePageState();
}

class _DistancePageState extends State<DistancePage> {
  int _currentStep = 0;
  List<Step> _steps = [
    Step(
      title: Text('10km'),
      content: SizedBox(),
    ),
    Step(
      title: Text('20km'),
      content: SizedBox(),
    ),
    Step(
      title: Text('30km'),
      content: SizedBox(),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Distance App'),
      ),
      body: Container(
        width: double.infinity,
        padding: EdgeInsets.all(16.0),
        child: Stepper(
          currentStep: _currentStep,
          onStepTapped: (step) {
            setState(() {
              _currentStep = step;
            });
          },
          onStepContinue: () {
            setState(() {
              if (_currentStep < _steps.length - 1) {
                _currentStep += 1;
              }
            });
          },
          onStepCancel: () {
            setState(() {
              if (_currentStep > 0) {
                _currentStep -= 1;
              }
            });
          },
          steps: _steps,
        ),
      ),
    );
  }
}

5. 거리 측정 기능 구현

사용자가 Stepper를 통해 거리를 선택한 후, 선택한 거리를 측정하여 출력하는 기능을 구현해보겠습니다.

class DistancePage extends StatefulWidget {
  @override
  _DistancePageState createState() => _DistancePageState();
}

class _DistancePageState extends State<DistancePage> {
  int _currentStep = 0;
  double _selectedDistance = 0;
  List<Step> _steps = [
    Step(
      title: Text('10km'),
      content: SizedBox(),
    ),
    Step(
      title: Text('20km'),
      content: SizedBox(),
    ),
    Step(
      title: Text('30km'),
      content: SizedBox(),
    ),
  ];

  void measureDistance() {
    switch (_currentStep) {
      case 0:
        _selectedDistance = 10;
        break;
      case 1:
        _selectedDistance = 20;
        break;
      case 2:
        _selectedDistance = 30;
        break;
    }
  }

  @override
  void initState() {
    super.initState();
    measureDistance();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Distance App'),
      ),
      body: Container(
        width: double.infinity,
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Selected Distance: $_selectedDistance km',
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 16),
            Stepper(
              currentStep: _currentStep,
              onStepTapped: (step) {
                setState(() {
                  _currentStep = step;
                  measureDistance();
                });
              },
              onStepContinue: () {
                setState(() {
                  if (_currentStep < _steps.length - 1) {
                    _currentStep += 1;
                    measureDistance();
                  }
                });
              },
              onStepCancel: () {
                setState(() {
                  if (_currentStep > 0) {
                    _currentStep -= 1;
                    measureDistance();
                  }
                });
              },
              steps: _steps,
            ),
          ],
        ),
      ),
    );
  }
}

6. 결론

이제 해당 애플리케이션에서 사용자가 선택한 거리를 측정하여 출력하는 거리 측정기를 구현했습니다. Flutter의 Stepper 위젯을 사용하여 순차적인 단계를 구현하고, 선택한 거리를 측정하는 기능을 추가했습니다. 이를 기반으로 원하는 기능을 추가하거나 UI를 개선할 수 있습니다.

이 튜토리얼은 Flutter를 사용하여 거리 측정기 애플리케이션을 만드는 방법을 소개했습니다. 만약 자세한 내용이나 추가적인 정보가 필요하다면 Flutter 공식 문서를 참고하세요.

목차