Flutter로 간단한 계산기 앱 만들기: 초보 개발자의 도전

안녕하세요! 스테디빌더입니다. 😁
이번에는 계산기 앱을 만들어볼 거예요. Flutter의 입력 필드와 버튼, 상태 관리를 활용해 덧셈, 뺄셈, 곱셈, 나눗셈을 간단히 구현하는 앱입니다. 이 과정에서 Flutter의 UI 구성과 상태 관리를 조금 더 익힐 수 있을 거예요.

목차

1. Flutter 계산기 앱 개요
2. 계산기 UI 구성하기
3. 계산 로직 추가하기
4. Flutter 초보자의 느낀 점
5. 다음 단계: 더 복잡한 계산기로 발전하기

---

1. Flutter 계산기 앱 개요

계산기 앱은 숫자 입력 필드와 연산 버튼을 조합한 간단한 구조입니다. 아래와 같은 기능을 구현해 볼 거예요.

• 두 개의 숫자를 입력받는다.
• 덧셈, 뺄셈, 곱셈, 나눗셈 버튼을 통해 결과를 계산한다.
• 결과를 화면에 표시한다.

---

2. 계산기 UI 구성하기

실행 가능한 코드: UI 기본 구조

import 'package:flutter/material.dart';

void main() => runApp(CalculatorApp());

class CalculatorApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CalculatorScreen(),
    );
  }
}

class CalculatorScreen extends StatefulWidget {
  @override
  _CalculatorScreenState createState() => _CalculatorScreenState();
}

class _CalculatorScreenState extends State<CalculatorScreen> {
  final TextEditingController _num1Controller = TextEditingController();
  final TextEditingController _num2Controller = TextEditingController();
  String _result = "";

  void _calculate(String operator) {
    final double? num1 = double.tryParse(_num1Controller.text);
    final double? num2 = double.tryParse(_num2Controller.text);

    if (num1 == null || num2 == null) {
      setState(() {
        _result = "올바른 숫자를 입력하세요!";
      });
      return;
    }

    setState(() {
      switch (operator) {
        case '+':
          _result = "결과: ${num1 + num2}";
          break;
        case '-':
          _result = "결과: ${num1 - num2}";
          break;
        case '*':
          _result = "결과: ${num1 * num2}";
          break;
        case '/':
          if (num2 == 0) {
            _result = "0으로 나눌 수 없습니다!";
          } else {
            _result = "결과: ${num1 / num2}";
          }
          break;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("간단한 계산기")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            TextField(
              controller: _num1Controller,
              decoration: InputDecoration(
                labelText: "첫 번째 숫자",
                border: OutlineInputBorder(),
              ),
              keyboardType: TextInputType.number,
            ),
            SizedBox(height: 10),
            TextField(
              controller: _num2Controller,
              decoration: InputDecoration(
                labelText: "두 번째 숫자",
                border: OutlineInputBorder(),
              ),
              keyboardType: TextInputType.number,
            ),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(
                  onPressed: () => _calculate('+'),
                  child: Text("+"),
                ),
                ElevatedButton(
                  onPressed: () => _calculate('-'),
                  child: Text("-"),
                ),
                ElevatedButton(
                  onPressed: () => _calculate('*'),
                  child: Text("*"),
                ),
                ElevatedButton(
                  onPressed: () => _calculate('/'),
                  child: Text("/"),
                ),
              ],
            ),
            SizedBox(height: 20),
            Text(
              _result,
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    );
  }
}

---

3. 계산 로직 추가하기

주요 기능 설명

1. 입력 필드
   • 두 개의 입력 필드를 제공하며, 숫자만 입력할 수 있도록 keyboardType: TextInputType.number를 설정했습니다.
2. 연산 버튼
   • 덧셈, 뺄셈, 곱셈, 나눗셈 버튼을 누를 때 _calculate 메서드를 호출해 결과를 계산합니다.
3. 결과 표시
   • 계산 결과 또는 오류 메시지를 _result 변수에 저장하고 화면에 표시합니다.

---

4. Flutter 초보자의 느낀 점

처음에는 입력 필드와 버튼을 조합하는 것부터 막막했지만, 하나씩 기능을 추가하니 점점 그림이 그려졌어요. 가장 어려웠던 점은 0으로 나눌 때 오류 처리였는데, 조건문을 추가해서 해결했습니다.

---

5. 다음 단계: 더 복잡한 계산기로 발전하기

이제 간단한 계산기를 만들었으니, 다음에는 이런 기능을 추가해볼 수 있어요.

• 이전 계산 기록 보기
• UI를 좀 더 개선하기
• 과학 계산기 기능 추가

---

마무리

Flutter로 간단한 계산기 앱을 만들어봤어요. 계산기 앱은 초보 개발자도 쉽게 도전할 수 있는 프로젝트로, 상태 관리와 UI 구성을 연습하기에 정말 좋은 것 같습니다.
혹시 Flutter를 배우며 비슷한 앱을 만들고 계신 분들이 있다면, 댓글로 의견을 나눠주세요! 함께 배우며 성장해봅시다. 😊