이번장에는 계산기의 숫자판에 대한 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,
);
}
}'Software > Flutter' 카테고리의 다른 글
| Flutter 초보자의 계산기 앱 만들기 (Epilogue: 상태관리 추가) (0) | 2023.04.14 |
|---|---|
| Flutter 초보자의 계산기 앱 만들기 #5 (Control) (0) | 2023.04.14 |
| Flutter 초보자의 계산기 앱 만들기 #4 (Layout-3) (0) | 2023.04.05 |
| Flutter 초보자의 계산기 앱 만들기 #2 (Layout-1) (0) | 2023.04.03 |
| Flutter 초보자의 계산기 앱 만들기 #1 (Intro) (0) | 2023.04.03 |
