Flutter 초보자의 계산기 앱 만들기 #4 (Layout-3)

이번 포스팅은 계산기 Layout 3번째로 키보드를 만들어 봅니다. 기본 화면설계 Layout은 이것으로 마무리가 될듯 합니다. 

한가지 이번 계산기 앱을 플로터 공부하고  2틀 만에 공부해가며 만들고 나서 계속 공부하는 와중에 참 설계가 잘못된 부분이 많구나 하는 것을 알았습니다. 기본적으로 윈도우 프로그램 개발하는 방식과는 차이가 좀 나네요.. 

 

제목에 초보자라는 타이틀이 있으니 초보자 입장에서 설계는 잘못 되었지만 일단은 기존에 설계된 코드로 포스팅을 하고 좀더 공부하면서 설계에 오류나 미진한 부분은 추가로 포스팅 하도록 하겠습니다. 

 

1. 버튼의 모양을 만들기 위한 위젯 Class 구현 

  * 버튼을 하나하나 개별적으로 만들수도 있겠지만 그러면 코드가 길어지기 때문에 클래스로 버튼의 틀을 만들고 속성값만 주어서 버튼이 생성될 수 있도록 합니다. 

   * 버튼 Class

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: () {},  // 버튼입력 이벤트 처리 부분(나중에 코드 추가)
			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,),),  // 버튼의 들어가는 글자 모양
		);
	}
}

2. 버튼 그룹 위젯 생성 

  * 위에 만들어진 버튼을 이용하여 4x5 행렬로 키보드 위젯을 만듭니다.

  * 위젯은 Table 라는 layout 위젯을 사용합니다. 

  * Class 구현 

class ButtonGroupWidget extends StatelessWidget 
{
  	const ButtonGroupWidget({super.key});

  	@override
  	Widget build(BuildContext context) 
	{
    	return Table
		(
			border: TableBorder.all(),
      		columnWidths: const <int, TableColumnWidth>
			{
        		0: FlexColumnWidth(),
        		1: FlexColumnWidth(),
        		2: FlexColumnWidth(),
				3: FlexColumnWidth(),  
      		},
      		defaultVerticalAlignment: TableCellVerticalAlignment.middle,	
      		children: <TableRow>
			[
        		TableRow
				(
					decoration: const BoxDecoration(color: Colors.black,),
          			children: <Widget>
					[
						Padding(padding: EdgeInsets.all(5), child: CalButton(caption: 'C', color: Colors.grey, buttonKind: 2,),),
						Padding(padding: EdgeInsets.all(5), child: CalButton(caption: '+/-', color: Colors.grey, buttonKind: 1,),),
						Padding(padding: EdgeInsets.all(5), child: CalButton(caption: '%', color: Colors.grey, buttonKind: 1,),),
						Padding(padding: EdgeInsets.all(5), child: CalButton(caption: '÷', color: Colors.orange, buttonKind: 1,),),
          			],
        		),
        		TableRow
				(
					decoration: const BoxDecoration(color: Colors.black,),  
          			children: <Widget>
					[
						Padding(padding: EdgeInsets.all(5), child: CalButton(caption: '7', color: Color.fromARGB(255, 61, 61, 61), buttonKind: 0,),),
						Padding(padding: EdgeInsets.all(5), child: CalButton(caption: '8', color: Color.fromARGB(255, 61, 61, 61), buttonKind: 0,),),
						Padding(padding: EdgeInsets.all(5), child: CalButton(caption: '9', color: Color.fromARGB(255, 61, 61, 61), buttonKind: 0,),),
						Padding(padding: EdgeInsets.all(5), child: CalButton(caption: '×', color: Colors.orange, buttonKind: 1,),),
          			],
        		),
				TableRow
				(
					decoration: const BoxDecoration(color: Colors.black,),
          			children: <Widget>
					[
						Padding(padding: EdgeInsets.all(5), child: CalButton(caption: '4', color: Color.fromARGB(255, 61, 61, 61), buttonKind: 0,),),
						Padding(padding: EdgeInsets.all(5), child: CalButton(caption: '5', color: Color.fromARGB(255, 61, 61, 61), buttonKind: 0,),),
						Padding(padding: EdgeInsets.all(5), child: CalButton(caption: '6', color: Color.fromARGB(255, 61, 61, 61), buttonKind: 0,),),
						Padding(padding: EdgeInsets.all(5), child: CalButton(caption: '−', color: Colors.orange,buttonKind: 1,),),
          			],
        		),
				TableRow
				(
					decoration: const BoxDecoration(color: Colors.black,),
          			children: <Widget>
					[
						Padding(padding: EdgeInsets.all(5), child: CalButton(caption: '1', color: Color.fromARGB(255, 61, 61, 61), buttonKind: 0,),),
						Padding(padding: EdgeInsets.all(5), child: CalButton(caption: '2', color: Color.fromARGB(255, 61, 61, 61), buttonKind: 0,),),
						Padding(padding: EdgeInsets.all(5), child: CalButton(caption: '3', color: Color.fromARGB(255, 61, 61, 61), buttonKind: 0,),),
						Padding(padding: EdgeInsets.all(5), child: CalButton(caption: '+', color: Colors.orange, buttonKind: 1,),),
          			],
        		),			
				TableRow
				(
					decoration: const BoxDecoration(color: Colors.black,),
          			children: <Widget>
					[
						Padding(padding: EdgeInsets.all(5), child: CalButton(caption: '0', color: Color.fromARGB(255, 61, 61, 61), buttonKind: 0,),),
						Padding(padding: EdgeInsets.all(5), child: CalButton(caption: '2', color: Color.fromARGB(255, 61, 61, 61), buttonKind: 1,),),
						Padding(padding: EdgeInsets.all(5), child: CalButton(caption: '.', color: Color.fromARGB(255, 61, 61, 61), buttonKind: 0,),),
						Padding(padding: EdgeInsets.all(5), child: CalButton(caption: '=', color: Colors.orange, buttonKind: 2,),),
          			],
        		),		
      		],
    	);
  	}
}

3. 이제 만들어진 버튼 그룹위젯을 화면에 추가 합니다. 

  * 지난 포스팅에 만든 DesignPage 클래스에 그룹 위젯을 생성 하여 넣습니다. 

  * 아래 코드에서 추가 되는 부분을 넣으시면 됩니다. 

class DesignPage extends State<MainPage>  
{
  	@override
	Widget build(BuildContext context)
	{
		return Scaffold
		(
			appBar: AppBar(title: Text('Calculator Program'),),
			body: Column
			(
				crossAxisAlignment: CrossAxisAlignment.stretch,
				children: <Widget>
				[
					Container
					(
						padding: EdgeInsets.all(30),
						alignment: Alignment(1.0, 1.0),   
						color: Colors.black,    					
						height: (MediaQuery.of(context).size.height - MediaQuery.of(context).padding.top) * 0.30,   // 화면의 30%를 차지하도록 설정
						child: displayText(caption: '$displayNumber', fontsize: displayFontSize,),
					),
          			ButtonGroupWidget(),  // 추가코드(버튼그룹위젯 생성)
				],					
			),
			backgroundColor: Colors.black,   
		);
	}
}

이것으로 화면 디자인에 대한 layout은 마무리 되었습니다. 

지금까지 만들어진 코드를 실행해 보면 처음에 보여 드린 계산기 모양이 나타나게 될 겁니다.