Flutter 초보자의 계산기 앱 만들기 #5 (Control)

계산기 만들기 마지막 포스팅으로 실제 계산기의 버튼을 누르고 연산을 하는 부분의 코드를 만듭니다. 

일단 컨트롤에 사용될 변수를 전역변수로 선언을 합니다. main 함수 위에 선언해 주시면 됩니다. 

var displayNumber = '0';
var makeNumber = '' ;
var selectedOperator = '−';
var displayFontSize = 80.0 ;
var pointExist = false ;

var firstNumber = 0.0 ;
var secondNumber = 0.0 ;

var _disignPage = new DesignPage() ;

 

컨트롤은 크게 3개의 함수로 구성되어 있습니다. 

 

1. 숫자키 입력 : 숫자키와 소숫점을 눌렀을 때 발생되는 알고리즘에 대한 함수 입니다. 숫자는 처음입력시에는 문자열의 형태로 저장을 하고 이후 연산할 때 double 형의 숫자로 변경하도록 프로그램 했습니다. 

void _numberOnPressed(String st)  		// 숫자키 입력 이벤트 함수 
{
	bool inputAdd = true ; 

	if(makeNumber.length < 9)  // 숫자는 9자리 까지만 
	{
		if(st == '.') // 소숫점이 눌려졌을 경우 
		{
			if(makeNumber.isEmpty == true)
			{ 
				makeNumber += '0.';
				inputAdd = false ;
			}
			else
			{
				if(pointExist == true) inputAdd = false ; // 소숫점이 없을 경우만 추가
			}

			pointExist = true ;
		}
		else if(st == '0' && makeNumber.isEmpty == true)  inputAdd = false;
		
		if(inputAdd == true) makeNumber += st ;

		displayNumber = makeNumber ;

		if(displayNumber.length < 7) displayFontSize = 80.0 ;  // 글자 크기를 선택 
		else displayFontSize = 50 ;

		_disignPage.setState(() { displayNumber ;});  // 화면을 갱신한다. 
	}
}
//-----------------------------------------------------------------------------------------

 

 

2. 연산자 키 입력 : 4개의 연산키를 눌렀을 때 적용되는 함수 입니다.

 

void _operatorOnPressed(String st)
{
	_resultOnPressed('=') ;

	selectedOperator = st ;
	firstNumber = double.parse(displayNumber) ;

	makeNumber = '';
	pointExist = false ;
}
//-----------------------------------------------------------------------------------------

 

3. '=', 'C'  연산결과와 클리어 기능의 함수 입니다. 

void _resultOnPressed(String st)
{
	if(st == 'C')		// clear input
	{
		makeNumber = ''; // clear clicked 
		displayNumber = '0' ;
		selectedOperator = '+' ;
	}
	else
	{
		secondNumber = double.parse(makeNumber) ;
		makeNumber = '';

		var result = 0.0 ;

		switch(selectedOperator)
		{
			case '+' : result = firstNumber + secondNumber ;	break ;
			case '−' : result = firstNumber - secondNumber ;	break ;
			case '×' : result = firstNumber * secondNumber ;	break ;
			case '÷' : result = firstNumber / secondNumber ;	break ;
		}

		displayNumber = result.toString();
	}
	 pointExist = false ;

	_disignPage.setState(() { displayNumber ;});  // 화면을 갱신한다. 
}

 

위의 3개 함수를 기존의 Layout 코드의 마지막 부분에 추가하여 넣습니다. 그리고 지난번에 CalButton 위젯 클래스를 아래와 같이 수정합니다. 

class CalButton extends StatelessWidget
{
	CalButton({super.key, required this.caption, required this.color, required this.buttonKind});
	final String caption ;  // 립력된 버튼의 문자 
	final Color color;      // 버튼의 색
	final int buttonKind;   // 입력된 버튼의 기능(0:숫자, 1:연산, 2:기능)

	@override
	Widget build(BuildContext context)
	{
		return ElevatedButton
		(
			onPressed: () 
			{ 
				switch(buttonKind)
				{
					case 0 : _numberOnPressed(caption); break ;
					case 1 : _operatorOnPressed(caption); break ;
					case 2 : _resultOnPressed(caption); break ; 
				}
			},
			style: ElevatedButton.styleFrom
			(
				backgroundColor: color, 
				fixedSize: Size((MediaQuery.of(context).size.width/4)-30, (MediaQuery.of(context).size.width/4)-20), 
				shape: const CircleBorder(),
			),
			child: Text('$caption', style: TextStyle(fontSize: 40,),),
		);
	}
}
//-----------------------------------------------------------------------------------------

마지막으로 MainPage 클래스도 아래 처럼 수정을 합니다. 

class MainPage extends StatefulWidget 
{
	@override
  	DesignPage createState() => _disignPage ; // DesignPage();
}
//-----------------------------------------------------------------------------------------

 

이것으로 계산기 앱의 기본 연산기능이 마무리 됩니다.

Flutter 시작하고 3일만에 만든 앱이라 두서없이 만들었습니다. 조금씩 공부하다 보니 손봐야 할 코드가 꽤 많네요..

제목 그대로 초보자 관점에서 만든것임을 감안해 주세요.. 아래 소스 전체 코드를 파일로 올려 놓습니다. 참고하세요

 

main.dart

0.01MB