GET X로 만든 계산기 어플 읽기

Get x를 만들기 위해서 코드 구조는 

lip 파일 안에 mvc 순으로 만들기 

model : 내용물

view :  화면에 표시되는 내용

control : 이벤트 발생 후  상태 업데이트 

 

아래 코드는 

model - widget

view - screen

control - control  

폴더로 만들어서 사용했음 

 

출처 

Flutter-GetX-calculator/lib at master · shistastic/Flutter-GetX-calculator (github.com)

GitHub - shistastic/Flutter-GetX-calculator: Tests with GetX

---

(57) Flutter - GetX Calculator - YouTube

 

 

코드 리뷰 

 

1. 파일 읽기 

- 아래 코드는 아래 3가지로 구성되어 있음 

Widget(model)  - 전체적인 뼈대를 제작하는 곳 

입력 숫자칸 1 , 중간에 연산자 기호 , 입력숫자칸 2, 연산칸과 결과값을 구분짓는 라인 ,

screen(view). - 숫자칸 만들기 ->  화면에 표시된 버튼을 구성하고 그 버튼에 Widget, control 에 담겨져 있는 함수를 호출한다. 

control  - 결과값에 관한 함수 다양한 연산자로 결과값을 변하게 한다. 

폴더로 만들어서 사용했음 

 

2. 함수 읽기 

  - 메인 다트에서는 Get x를 사용하기에 Stateful  위젯이 아닌 Stateless 위젯을 사용 

•  screen.dart
• 에서 MathResults(),으로 결과값을 보여주게 만듬
• 각 버튼에 "+" or "연산기호" 을 만들고 calculatorController.selectOperation("X"), 로 컨트롤러에 있는 함수로 지정 , 숫자는 "8" 문자열로 보이게함 

 

• control
• class CalculatorController extends GetxController {
    var firstNumber = "10".obs;
    var secondNumber = "20".obs;
    var mathResult = "30".obs;
    var operation = "+".obs;  //뒤에 .obs를 붙여서 실시간 데이터 를 관찰하게 만듬 = Stateful 위젯 기능 
• switch (operation.value) {
        case "+":
          mathResult.value = "${num1 + num2}";
          break;
        case "-":
          mathResult.value = "${num1 - num2}";
          break;
        case "/":
          mathResult.value = "${num1 / num2}";
          break;
        case "X":
          mathResult.value = "${num1 * num2}";
          break;
        default:
          return;
      }

3. 위젯 읽기 

 

버튼을 만들고 텍스트로 숫자 표시 -> 이벤트 발생 함수 -> 정해진 숫자가 입력되게 하는 방식 

연산자기호도 동일 + 입력하면 + 아래 함수가 호출됨 

switch는 다중 조건문 , 여러 조건이 필요할 때 가독성이 좋음 

 

switch (operation.value) {
      case "+":
        mathResult.value = "${num1 + num2}";
        break;
      case "-":
        mathResult.value = "${num1 - num2}";
        break;
      case "/":
        mathResult.value = "${num1 / num2}";
        break;
      case "X":
        mathResult.value = "${num1 * num2}";
        break;
      default:
        return;
    }

 

 

---

 

main.dart

 

import 'package:calculadora/screens/calculator_screen.dart';
import 'package:flutter/material.dart';

 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Material App',
      home: CalculatorScreen(),
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: Colors.black
      ),
    );
  }
}

 

---

screen.dart : 화면에 나오는 버튼 위치 + 이벤트 지정

 

import 'package:calculadora/controllers/calculator_controller.dart';
import 'package:calculadora/widgets/calc_button.dart';
import 'package:calculadora/widgets/math_results.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class CalculatorScreen extends StatelessWidget {
  final calculatorController = Get.put(CalculatorController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 10),
        child: Column(
          children: [
            Expanded(
              child: Container(),
            ),
            MathResults(),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                CalculatorButton(
                  text: 'AC',
                  bgColor: Color(0xffA5A5A5),
                  onPressed: () => calculatorController.resetAll(),
                ),
                CalculatorButton(
                  text: '+/-',
                  bgColor: Color(0xffA5A5A5),
                  onPressed: () =>
                      calculatorController.changeNegativePositive(),
                ),
                CalculatorButton(
                  text: 'del',
                  bgColor: Color(0xffA5A5A5),
                  onPressed: () => calculatorController.deleteLastEntry(),
                ),
                CalculatorButton(
                  text: '/',
                  bgColor: Color(0xffF0A23B),
                  onPressed: () => calculatorController.selectOperation("/"),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                CalculatorButton(
                  text: '7',
                  onPressed: () => calculatorController.addNumber("7"),
                ),
                CalculatorButton(
                  text: '8',
                  onPressed: () => calculatorController.addNumber("8"),
                ),
                CalculatorButton(
                  text: '9',
                  onPressed: () => calculatorController.addNumber("9"),
                ),
                CalculatorButton(
                  text: 'X',
                  bgColor: Color(0xffF0A23B),
                  onPressed: () => calculatorController.selectOperation("X"),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                CalculatorButton(
                  text: '4',
                  onPressed: () => calculatorController.addNumber("4"),
                ),
                CalculatorButton(
                  text: '5',
                  onPressed: () => calculatorController.addNumber("5"),
                ),
                CalculatorButton(
                  text: '6',
                  onPressed: () => calculatorController.addNumber("6"),
                ),
                CalculatorButton(
                  text: '-',
                  bgColor: Color(0xffF0A23B),
                  onPressed: () => calculatorController.selectOperation("-"),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                CalculatorButton(
                  text: '1',
                  onPressed: () => calculatorController.addNumber("1"),
                ),
                CalculatorButton(
                  text: '2',
                  onPressed: () => calculatorController.addNumber("2"),
                ),
                CalculatorButton(
                  text: '3',
                  onPressed: () => calculatorController.addNumber("3"),
                ),
                CalculatorButton(
                  text: '+',
                  bgColor: Color(0xffF0A23B),
                  onPressed: () => calculatorController.selectOperation("+"),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                CalculatorButton(
                  text: '0',
                  big: true,
                  onPressed: () => calculatorController.addNumber("0"),
                ),
                CalculatorButton(
                  text: '.',
                  onPressed: () => calculatorController.addDecimalPoint(),
                ),
                CalculatorButton(
                  text: '=',
                  bgColor: Color(0xffF0A23B),
                  onPressed: () => calculatorController.calculateResult(),
                ),
              ],
            ),
          ],
        ),
      ),
    ));
  }
}

 

---

cal_button.dart. :  버튼의 스타일을 지정해주기 

 

import 'package:flutter/material.dart';

class CalculatorButton extends StatelessWidget {

  final Color bgColor;
  final bool big;
  final String text;

  final Function onPressed;

  CalculatorButton({
    Key? key, 
    bgColor,
    this.big = false, 
    required this.text, 
    required this.onPressed,
  }): this.bgColor = bgColor ?? Color(0xff333333),
      super(key: key);
      

  @override
  Widget build(BuildContext context) {
    // Button
    final buttonStyle = TextButton.styleFrom(
        backgroundColor: this.bgColor,
        primary: Colors.white,
        shape: StadiumBorder(),
    );

    return Container(
      margin: EdgeInsets.only( bottom: 10, right: 5, left: 5 ),
      child: TextButton(
        style: buttonStyle,
        child: Container(
          width: this.big ? 150 : 65,
          height: 65,
          child: Center(
            child: Text( this.text , style: TextStyle( fontSize: 30, fontWeight: FontWeight.w300 ),)
          ),
        ),
        onPressed: () => this.onPressed(),
      ),
    );
  }
}

 

---

line_separator.dart

 

import 'package:flutter/material.dart';

class LineSeparator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 2,
      color: Colors.white.withOpacity(0.4),
      margin: EdgeInsets.symmetric( vertical: 10 )
    );
  }
}

 

---

main_result.dart

import 'package:flutter/material.dart';

class MainResultText extends StatelessWidget {
  final String text;

  const MainResultText({Key? key, required this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(bottom: 20),
      width: double.infinity,
      alignment: Alignment.centerRight,
      child: FittedBox(
          fit: BoxFit.contain,
          child: Text(this.text, style: TextStyle(fontSize: 50))),
    );
  }
}

 

---

math_results.dart

 

import 'package:calculadora/controllers/calculator_controller.dart';
import 'package:calculadora/widgets/line_separator.dart';
import 'package:calculadora/widgets/main_result.dart';
import 'package:calculadora/widgets/sub_result.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class MathResults extends StatelessWidget {
  final calculatorController = Get.find<CalculatorController>();

  @override
  Widget build(BuildContext context) {
    return Obx(
      () => Column(
        children: [
          SubResult(text: calculatorController.firstNumber.value),
          SubResult(text: calculatorController.operation.value),
          SubResult(text: calculatorController.secondNumber.value),
          LineSeparator(),
          MainResultText(text: calculatorController.mathResult.value),
        ],
      ),
    );
  }
}

 

---

sub_result.dart

 

import 'package:flutter/material.dart';

class SubResult extends StatelessWidget {

  final String text;

  const SubResult({Key? key, required this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      alignment: Alignment.centerRight,
      child: Text( this.text , style: TextStyle(fontSize: 30 ) ),
    );
  }
}

 

---

calculator_controller.dart

 

import 'package:get/get.dart';

class CalculatorController extends GetxController {
  var firstNumber = "10".obs;
  var secondNumber = "20".obs;
  var mathResult = "30".obs;
  var operation = "+".obs;

  void resetAll() {
    firstNumber.value = "0";
    secondNumber.value = "0";
    mathResult.value = "0";
    operation.value = "+";
  }

  changeNegativePositive() {
    if (mathResult.startsWith("-")) {
      mathResult.value = mathResult.value.replaceFirst("-", "");
    } else {
      mathResult.value = "-" + mathResult.value;
    }
  }

  addNumber(String number) {
    if (mathResult.value == "0") {
      return mathResult.value = number;
    }

    if (mathResult.value == "-0") {
      return mathResult.value = "-" + number;
    }

    mathResult.value = mathResult.value + number;
  }

  addDecimalPoint() {
    if (mathResult.contains(".")) return;
    if (mathResult.startsWith("0")) {
      mathResult.value = "0.";
    } else {
      mathResult.value = mathResult.value + ".";
    }
  }

  selectOperation(String newOperation) {
    operation.value = newOperation;
    firstNumber.value = mathResult.value;
    mathResult.value = "0";
  }

  deleteLastEntry() {
    if (mathResult.value.replaceAll("-", "").length > 1) {
      mathResult.value =
          mathResult.value.substring(0, mathResult.value.length - 1);
    } else {
      mathResult.value = "0";
    }
  }

  calculateResult() {
    double num1 = double.parse(firstNumber.value);
    double num2 = double.parse(mathResult.value);

    secondNumber.value = mathResult.value;

    switch (operation.value) {
      case "+":
        mathResult.value = "${num1 + num2}";
        break;
      case "-":
        mathResult.value = "${num1 - num2}";
        break;
      case "/":
        mathResult.value = "${num1 / num2}";
        break;
      case "X":
        mathResult.value = "${num1 * num2}";
        break;
      default:
        return;
    }

    if (mathResult.value.endsWith(".0")) {
      mathResult.value =
          mathResult.value.substring(0, mathResult.value.length - 2);
    }
  }
}