반응형
플러터 UI 는 위젯으로 시작해서 위젯으로 끝난다. 심지어 앱 자체도 MaterialApp 위젯이다.
일단, 프로젝트의 lib/main.dart 에 아래 소스를 붙여 넣어 보자.
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: 'Space Daily',
home: FlutterLogo(),
));
}
실행 결과부터 보고 소스 설명을 해보자. 중앙에 플러터 로고가 나온다. :)
간단한 소스지만, 중요한 포인트를 설명해 보자면,
1) runApp() 함수
플러터 앱은 runApp 함수 호출로 시작된다. runApp 호출 시, 넘겨주는 위젯이 앱의 루트 위젯이 된다.
코드 자체는 간단해 보이지만, 내부적으로 플랫폼 (안드로이드, ios, 혹은 데스크탑) 바인딩을 초기화 하고 윈도우 생성, 스케줄러 초기화, 위젯 트리, 엘리먼트 트리, 렌더 트리 생성이라는 복잡한 일들이 발생한다.
참고로, 우리는 MaterialApp 이라는 위젯을 넘겼지만, 그냥 FlutterLogo 위젯을 바로 넘겨줘도 화면에 로고가 잘 표시되는 것을 확인할 수 있다.
참고로, FlutterLogo 위젯은 말그대로 플러터 로고 아이콘을 보여주는 위젯이다. ^^
2) MaterialApp 위젯
MaterialApp 위젯은 플러터 앱 UI 기본 구조를 잡아주는 말 그대로 앱 위젯이다.
- 앱 이름, 테마, 다국어 지원 등 앱 설정 관리가 가능하고
- 'home' 이라는 속성에 시작 UI 에 해당하는 위젯을 추가할 수 있다.
우리는 예제에서,
- 앱 이름을 'Space Daily' 를 설정했고,
- home에 플러터 로고를 추가했다.
일단 여기까지는 쉽다. ㅎㅎ; 다음 포스트에서는 테마 설정을 통해 앱의 칼라코드 및 주요 폰트 설정을 해보겠다.
반응형
댓글