[flutter] 플러터 Stepper를 사용하여 몸무게를 입력하는 체중 계산기 애플리케이션을 만들어보자.

07 Dec 2023

flutter

이번에는 Flutter를 사용하여 체중 계산기 애플리케이션을 만들어보겠습니다. 이 애플리케이션은 Stepper 위젯을 사용하여 사용자의 몸무게를 입력하고, 입력된 몸무게를 기준으로 체질량 지수(BMI)를 계산해주는 기능을 제공합니다.

1. 체중 계산기 애플리케이션 구성 요소

체중 계산기 애플리케이션은 다음과 같은 구성 요소로 구성됩니다:

Stepper: 몸무게를 입력받는 위젯
Text: 입력된 몸무게를 표시하는 위젯
RaisedButton: 계산 버튼
AlertDialog: 계산 결과를 표시하는 다이얼로그

2. 플러터 프로젝트 생성

플러터로 새로운 프로젝트를 생성합니다. 다음 명령어를 터미널에 입력하여 프로젝트를 생성합니다:

flutter create weight_calculator
cd weight_calculator

3. 프로젝트 구성하기

lib 폴더 내에 main.dart 파일을 생성하고, 다음과 같이 코드를 작성합니다:

import 'package:flutter/material.dart';

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

class WeightCalculatorApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Weight Calculator',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: WeightCalculatorPage(),
    );
  }
}

class WeightCalculatorPage extends StatefulWidget {
  @override
  _WeightCalculatorPageState createState() => _WeightCalculatorPageState();
}

class _WeightCalculatorPageState extends State<WeightCalculatorPage> {
  int weight = 50;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Weight Calculator'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Stepper(
              value: weight.toDouble(),
              min: 0,
              max: 150,
              step: 1,
              onChanged: (newValue) {
                setState(() {
                  weight = newValue.toInt();
                });
              },
            ),
            SizedBox(height: 16.0),
            Text('Your Weight: $weight kg'),
            SizedBox(height: 16.0),
            RaisedButton(
              child: Text('Calculate BMI'),
              onPressed: () {
                _showBMIAlertDialog();
              },
            ),
          ],
        ),
      ),
    );
  }

  void _showBMIAlertDialog() {
    double height = 1.75; // 임의의 키 값
    double bmi = weight / (height * height);

    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('BMI Result'),
          content: Text('Your BMI: $bmi'),
          actions: [
            FlatButton(
              child: Text('OK'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }
}

4. 애플리케이션 실행하기

터미널에서 다음 명령어를 입력하여 애플리케이션을 실행합니다:

flutter run

체중 계산기 애플리케이션이 실행되고, 스텝별로 몸무게를 입력할 수 있습니다. 계산 버튼을 누르면 BMI 결과를 확인할 수 있는 다이얼로그가 표시됩니다.

결론

이번에는 플러터의 Stepper 위젯을 활용하여 체중 계산기 애플리케이션을 만들어보았습니다. 이를 통해 플러터의 다양한 위젯을 활용하여 유용한 애플리케이션을 개발할 수 있음을 알 수 있습니다.

다양한 기능을 추가하거나 UI를 개선하여 향후에 더 발전된 체중 계산기를 만들어보세요!