[flutter] 플러터 Stepper를 사용하여 사용자가 선택한 속도로 이동하는 자동차 시뮬레이터 애플리케이션을 만들어보자.

07 Dec 2023

flutter

플러터(Flutter)를 사용하여 자동차 시뮬레이터 애플리케이션을 만들어보겠습니다. 이 애플리케이션은 사용자가 선택한 속도로 자동차가 이동하는 기능을 가지고 있습니다.

Stepper 위젯

이 애플리케이션에서 사용할 위젯은 Stepper 입니다. Stepper는 순차적인 단계를 표시하고 사용자가 각 단계를 차례대로 진행하도록 도와줍니다. 우리는 이 위젯을 사용하여 자동차의 속도를 선택할 수 있도록 할 것입니다.

Stepper(
    steps: [
        Step(
            title: Text('1단계'),
            content: Text('1단계 내용'),
        ),
        // 다른 단계들
    ],
)

Stepper 위젯 안에는 Step 위젯들이 들어갑니다. 각 Step 위젯은 title과 content를 가지고 있으며, 이를 이용하여 단계의 제목과 내용을 설정합니다.

자동차 시뮬레이터 애플리케이션

자동차 시뮬레이터 애플리케이션을 만들기 위해 아래와 같은 단계를 거칩니다.

Stepper 위젯을 생성하고 단계에 대한 정보를 추가합니다.
사용자가 선택한 속도를 저장할 변수를 만들고 초기값을 설정합니다.
사용자가 각 단계를 선택할 때 마다 속도 변수를 업데이트하여 자동차의 속도를 변경합니다.
자동차의 속도에 맞게 화면의 텍스트를 변경하여 현재 속도를 표시합니다.

import 'package:flutter/material.dart';

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

class CarSimulatorApp extends StatefulWidget {
  @override
  _CarSimulatorAppState createState() => _CarSimulatorAppState();
}

class _CarSimulatorAppState extends State<CarSimulatorApp> {
  int speed = 0; // 초기 속도는 0으로 설정

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Car Simulator'),
        ),
        body: Stepper(
          steps: [
            Step(
              title: Text('1단계'),
              content: Text('속도: 10km/h'), // 각 단계의 내용에 현재 속도를 표시
            ),
            Step(
              title: Text('2단계'),
              content: Text('속도: 30km/h'),
            ),
            Step(
              title: Text('3단계'),
              content: Text('속도: 50km/h'),
            ),
          ],
          currentStep: speed, // 사용자가 선택한 속도에 해당하는 단계를 표시
          onStepTapped: (int step) {
            setState(() {
              speed = step; // 선택한 단계에 해당하는 속도로 업데이트
            });
          },
        ),
      ),
    );
  }
}

위 코드에서 Stepper 위젯을 생성하고 각 단계에 대한 정보를 Step 위젯으로 추가합니다. currentStep 속성을 사용하여 사용자가 선택한 속도에 해당하는 단계를 표시하고, onStepTapped 속성을 이용하여 사용자가 단계를 선택할 때 마다 속도 변수를 업데이트합니다. 변경된 속도는 각 단계의 내용에 표시됩니다.

이제 위의 코드를 실행하고 자동차 시뮬레이터 애플리케이션을 즐겨보세요!