[Flutter] Widget - MaterialApp

1. MaterialApp이란?

MaterialApp Widget은 Material Design을 구현하기 위한 다양한 속성을 가지고 있는 Widget입니다.

바로 MaterialApp이 가지고 있는 속성에 대해 알아보도록 하겠습니다.

2. MaterialApp 속성

https://api.flutter.dev/flutter/material/MaterialApp-class.html

MaterialApp class - material library - Dart API

Flutter Material API의 MaterialApp Widget 가이드를 보면, 많은 속성(Properties)에 대한 설명이 기재되어있습니다. 이 중 자주 사용되거나 중요한 속성에 대해서만 정리해보도록 하겠습니다.

 

1) title

<title 속성>

- 매개변수 타입 : String

- 역할 : App에 대한 간단한 설명 작성

 

2) theme

<theme 속성>

- 매개변수 타입 : ThemeData

- 역할 : 색상, 글꼴 등을 설정

 

3) home

<home 속성>

- 매개변수 타입 : Widget

- 역할 : App의 기본이 되는 페이지로써, home을 기점으로 다양한 Widget을 이용하여 App 개발

3. MaterialApp 예제 코드

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'Description',
      theme: ThemeData(primaryColor: Colors.blue),
      home: Scaffold(
        appBar: AppBar(title: Text('TITLE')),
      ),
    ),
  );
}

예제 코드의 의미는 다음과 같습니다.

• 'Description'이라는 문자열로 App 설명서 작성
• Colors Widget으로 파란색 테마 설정
• Scaffold Widget으로 메인 화면을 구현
  • AppBar Widget으로 상단 메뉴 구현
    • Text Widget으로 'TITLE'이란 제목 표시

4. MaterialApp 실행 결과

<MaterialApp Widget 실행 화면>