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

앱설계 첫번째로 화면 Layout 을 설계 합니다. 

Flutter 는 모든 구성요소들이 Widget 이라는 모듈로 되어 있고 이 모듈들을 화면에 어떻게 배치할 것인가를 설계하는 것에서 프로그램이 시작 됩니다. 어떤 위젯을 사용할 것인지 어떻게 배치할 것인지에 대한 Layout을 먼저 구성 합니다. 

 

1. Layout 설계 : 계산기 앱을 만들기에 앞서 아래 그림과 같이 기본 Layout을 설계 했습니다. 아래 그림에서 블럭 하나하나가 다 Widget 입니다. 물론 더 세세하게 내려가면서 위젯이 더 있지만 앱 설계의 큰 틀은 아래와 같습니다. 

기본 layout

2. 화면 Layout 코딩 설계

  C# 이나 visual basic 처럼 예전에는 화면을 디자인 하기위해 별도의 디자인 에디터에서 설계를 했었는데 최근 개발툴의 추세는 코딩으로 UI 설계를 하는 방향으로 변화하는 듯 합니다. 

 

  (1) 프로그램 진입 ( main 함수 ) : Dart 언어도 C 언어처럼 프로그램의 시작을 main 함수에서 시작 합니다. 

    * CalculatorApp() 이라는 위젯을 생성하는 것으로 프로그램이 시작 됩니다.

    * CalculatorApp 은 MaterialApp 을넘겨 받도록 위젯 Class 로 설계 되어 있다. 

import 'dart:io';
import 'package:flutter/material.dart';

void main() 
{
	runApp(const CalculatorApp());
}
//-----------------------------------------------------------------------------------------

  (2) MaterialApp :

    * Material Design Pattern 으로 설계가 진행 되도록 위젯들이 구성되어 진다. 

    * 앱 설계 디자인을 선택하기 때문에 앱의 가장 근본(root) 로 설정이 이루어 진다. 

    * 기본 구조 

           - title : 간단한 앱의 한 줄 설명입니다. ( 특별한 기능은 없음)

           - theme : 앱의 테마를 지정 

           - home : MaterialApp의 기본 경로로 앱 실행 시 가장 먼저 볼 수 있는 화면(Scaffold 위젯을 사용하여 정의)

    * MaterialApp의 클래스 구조는 아래와 같다.  

    * 여기까지 코드 작성이 되었다면 그림을 그리기 위한 도화지는 준비가 된 것입니다. 

class CalculatorApp extends StatelessWidget 
{
	const CalculatorApp({super.key});
  
	@override
	Widget build(BuildContext context)  // This widget is the root of your application.
	{
		return MaterialApp
		(
			title: 'Calculator App',
			theme: ThemeData(primarySwatch: Colors.blue,),
			home: MainPage(),   // 실제 화면UI가 구현되는 widget(Scaffold)
		);
	}
}

  (3) Scaffold : 본격적으로 그림을 그리기에 앞서 도화지의 영역을 나누어 봅니다. 

    * MaterialApp 의 하위 개념으로 home 에서 호출이 되어 화면에 출력이 된다. 

    * 기본 구조 : 기본구조는 크게 3 영역으로 나뉘며 Body를 제외하고 나머지는 생략이 가능하다. 

      - AppBar : 주로 창 이름을 담당하는 영역 설정 

      - Body : 앱 동작의 주요 영역 설정 

      - BottomNavigationBar : 다른 창 으로 이동할 수 있는 버튼들이 있는 영역 설정 

      - 기타 위젯 설정 ( 예 : FloatingActionButton : 창 위에 떠 있는 효과를 주는 버튼) 

    * Scaffold 의 클래스 구조는 아래와 같다.  

class MainPage extends StatefulWidget 
{
	@override
  	DesignPage createState() => DesignPage();
}
//-----------------------------------------------------------------------------------------
class DesignPage extends State<MainPage>  
{
  	@override
	Widget build(BuildContext context)
	{
		return Scaffold
		(
			appBar: AppBar(title: Text('Calculator Program'),),    // 앱의 제목이 표시되는 영역설정
			body: Column    // 앱의 주요 화면UI 영역 설정 (Column 위젯이 사용됨) 
			(
				crossAxisAlignment: CrossAxisAlignment.stretch,
				children: <Widget>
				[
				],					
			),
			backgroundColor: Colors.black,   // 화면의 전체 배경색을 지정
		);
	}
}

 

여기까지 코딩으로 도화지를 준비하고 도화지에 그림그릴 영역을 나누고 제목을 적어 주는것까지 완료가 되었습니다.