Flutter에서 MaterialApp() 위젯 이해하기

Flutter 앱 개발에서 UI를 구성하는 중요한 위젯 중 하나는 MaterialApp 위젯입니다. 이 위젯은 Flutter에서 제공하는 기본적인 디자인 체계를 기반으로 앱의 UI를 구현하는 데 사용됩니다.

이 글에서는 MaterialApp 위젯의 역할과 주요 파라미터에 대해 자세히 살펴보고, 실제 코드 예시를 통해 이해를 돕겠습니다.

1. MaterialApp() 위젯의 역할

MaterialApp 위젯은 다음과 같은 역할을 수행합니다.

• 앱의 기본 디자인 체계 설정: 기본적인 색상, 폰트, 위젯 스타일 등을 설정합니다.
• 앱의 라우팅 관리: 앱 내 여러 화면 간의 이동을 관리합니다.
• 앱의 위젯 트리 루트 설정: 앱의 UI를 구성하는 위젯 트리의 루트 위젯 역할을 합니다.

2. MaterialApp() 위젯의 주요 파라미터

MaterialApp 위젯은 다양한 파라미터를 사용하여 앱의 UI를 설정할 수 있습니다. 주요 파라미터는 다음과 같습니다.

• home: 앱의 첫 화면으로 표시될 위젯을 설정합니다.
• theme: 앱의 전체적인 디자인 테마를 설정합니다.
• routes: 앱 내 여러 화면 간의 라우팅 정보를 설정합니다.
• navigatorKey: 앱의 라우팅을 관리하는 Navigator 객체의 키를 설정합니다.

1) home:

home 파라미터는 앱 실행 시 처음 표시될 위젯을 설정합니다. 일반적으로 Scaffold 위젯을 사용하여 앱의 기본 구조를 만들고, 그 안에 원하는 위젯을 배치합니다.

2) theme:

theme 파라미터는 앱의 전체적인 디자인 테마를 설정합니다. ThemeData 객체를 사용하여 앱의 기본 색상, 폰트, 위젯 스타일 등을 설정할 수 있습니다.

3) routes:

routes 파라미터는 앱 내 여러 화면 간의 라우팅 정보를 설정합니다. 각 화면의 이름과 이동하는 방법을 정의하여 앱의 라우팅을 관리합니다.

4) navigatorKey:

navigatorKey 파라미터는 앱의 라우팅을 관리하는 Navigator 객체의 키를 설정합니다. Navigator 객체를 사용하여 앱 내 여러 화면 간의 이동을 코드로 제어할 수 있습니다.

 

3. 코드 예시

다음은 MaterialApp 위젯을 사용하는 간단한 예시입니다.

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: Text('Hello, World!'),
      ),
    ),
  ));
}

위 코드에서 MaterialApp 위젯은 Scaffold 위젯을 home 파라미터로 설정하여 앱의 첫 화면으로 표시합니다. Scaffold 위젯 안에 Center 위젯을 사용하여 'Hello, World!'라는 텍스트를 화면 중앙에 표시합니다.