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

이번장에는 계산기의 숫자판에 대한 Layout를 코딩해 보도록 하겠습니다. 

숫자판은 Text 위젯을 사용할 것이고 이 Text 위젯은 Container 라는 위젯을 담기위한 위젯안에 들어가게 됩니다. 

Container 위젯은 내부에 또 다른 위젯을 담기위해 사용하고 위젯은 1개만 넣을 수 있습니다. 

 

1. Container 위젯 코드 

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,
    child: displayText(caption: '$displayNumber', fontsize: displayFontSize,),       
),

  (1) 코드 설명  

    * padding: EdgeInsets.all(30),  : Container 내부 모든면에 30 의 값으로 빈 공간을 확보 합니다. 

    * alignment: Alignment(1.0, 1.0),   : 내부 위젯의 위치를 우측 하단으로 설정 

    * color: Colors.black, : 배경색을 검정으로 

    * height: (MediaQuery.of(context).size.height - MediaQuery.of(context).padding.top) * 0.30, :

       Container의 높이를 전체화면의 30% 로 설정합니다. 높이 설정은 핸드폰 마다 화면사이즈가

       틀리기 때문에 핸드폰의 세로값을 불러와서 세로값의 30% 의 크기로 자동 생성됩니다.

    * child: displayText(caption: '$displayNumber', fontsize: displayFontSize,), : Text 위젯을 생성하고 Container에 넣습니다. 

 

  (2) Text 위젯 Class 코드 

class displayText extends StatelessWidget
{
	displayText({super.key, required this.caption, required this.fontsize});
	final String caption ;
	final double fontsize ;

	@override
	Widget build(BuildContext context)
	{
		return Text
		(
			'$caption', 
			style: TextStyle(color: Colors.white, backgroundColor: Colors.black, fontSize: fontsize,),
			textAlign: TextAlign.right,
		) ;
	}
}

  * Container 내부에 들어가는 Text 위젯에 대한 코드입니다. 

    - 생성자의 파라메터로 Text에 들어갈 Caption 과 Text의 폰트 크기값을 받습니다. 

 

2. DesignPage 클래스 내용 수정 : 지난 포스팅에서 일부 작성된 DesignPage 클래스에 Container 를 추가 합니다. 

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,),
					),
				],					
			),
			backgroundColor: Colors.black,   
		);
	}
}