[flutter] ios-app 클론코딩하기3편 계산기 구현하기

안녕하세요? 이번주는 ios 계산기를 구현해봤습니다.

그럼 바로 시작하겠습니다.

 

필요한 기능

1.숫자(=A)를 탭하면 계산기 위의 text가 변경된다. 

2.연산자를 탭하면 해당 연산자 탭의 색상이 변경된다. 

3.다시 숫자를 탭하면 새로 입력된 숫자의 텍스트를 표시한다. 

4.=연산자를 탭하면 이전에 선택된 숫자(A)와 숫자(B)의 연산결과가 text에 표시된다.

5.다시 연산자를 탭하면 2번으로 돌아간다. 

6.숫자를 누르면 기록이 날아간다. 

7.AC를 누르면 리셋된다. 

 

구현한 코드

먼저 숫자를 탭했을 때의 코드입니다.

List<String> nums 변수를 사용해서 값을 담았는데 생각해보니 그냥 String으로 담아도 되겠습니다. 수정해야겠네요

  void onTapNumber(String num){
    nums.add(num);
    setState(() {});
  }

 

다음은 연산자를 탭했을 때의 코드입니다. 

List로 받아온 숫자들을 int로 변환시켜서 처음 입력되는 값인 경우 연산을 위해 따로 변수에 담고 List를 비워줍니다. 

  void onTapOperator(String name){
    if(first_num.isNaN){
      String first='';
      for(int i=0; i<nums.length; i++){
        first+=nums[i];
      }
      first_num=int.parse(first);
    }

    nums=[];
    operator=name;
    isTap=true;
    setState(() {});
  }

 

 

다음은 =연산자를 탭했을 때의 코드입니다. 

이전에 담아두었던 연산자들과 입력된 두 int 변수의 연산을 진행했고

이어지는 연산을 대비하며 List와 operator들을 초기화해줍니다. 

 void onTapAssign(){

    String res='';
    for(int i=0; i<nums.length; i++){
      res+=nums[i];
    }
    last_num=int.parse(res);

    if(operator=='+'){
      result=first_num + last_num;
    }else if(operator=='-'){
      result=first_num-last_num;
    }else if(operator=='x'){
      result=first_num*last_num;
    }else if(operator=='÷'){
      result=first_num~/last_num;
    }

    first_num=result;
    operator='';
    last_num=0;
    nums=[];
    setState(() {});
  }

 

다음은 AC 버튼을 눌러 모든 값을 초기화하는 코드입니다. 

 void onTapAc(){
    // number=0;
    first_num=0;
    nums=[];
    before=0;
    result=0;
    operator='';
    isTap=false;
    setState(() {});
  }

 

 

아직 코드는 완성되지 않은 상태입니다. 이번 주내로 계속 수정해볼게요 👀 

 

 

 

 

 

완성된 화면

좌측에 보이는 화면은 클론코딩으로 참고한 아이폰 계산기 앱입니다. 우측에 보이시는 화면이 현재까지 완성된 화면입니다. 

 

 

완성된 전체 코드는 깃허브 링크로 남겨두겠습니다 🫶 

GitHub - kimiszero/iPhone_app_clonecoding: 아이폰에 있는 앱들 한번 따라 만들어보기👀