MaterialApp: 루트 위젯의 정의와 설정 방법

Flutter에서 MaterialApp이란?

MaterialApp은 Flutter 애플리케이션에서 Material Design을 초기화하는 래퍼 위젯입니다. Widget Tree의 루트이며 하위 위젯에 시스템 서비스(탐색, 테마, 미디어 쿼리, 현지화)에 대한 액세스를 제공합니다. MaterialApp이 없으면 애플리케이션에 표준 Material 스타일이 없으며 Scaffold, AppBar, FloatingActionButton 및 BottomNavigationBar와 같은 위젯을 사용할 수 없습니다.

MaterialApp이 Widget Tree에 추가하는 것

MaterialApp을 사용하면 Flutter가 자동으로 트리 루트에 여러 핵심 위젯을 추가합니다: Navigator(탐색용 화면 스택), Theme(색 구성표 및 스타일), MediaQuery(디바이스 정보), Localizations(현지화된 문자열), Directionality(텍스트 방향). 이러한 위젯은 InheritedWidget으로 구현되며 애플리케이션 어디서나 BuildContext를 통해 액세스할 수 있습니다.

기본 사용법

MaterialApp의 최소 구성에는 home 매개변수만 필요합니다 — 메인 화면에 표시되는 위젯입니다. Flutter는 WidgetsBinding 메커니즘을 통해 home이 이미 Scaffold가 아닌 경우 자동으로 Scaffold로 래핑합니다. runApp(MaterialApp(home: MyHomePage()))으로 애플리케이션을 시작하면 Flutter가 MaterialApp을 루트로 하는 루트 Widget Tree를 생성합니다.

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "My Application",
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: "Roboto",
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

이 예제에서 MaterialApp은 기본 테마(라이트 및 다크), 제목 및 메인 화면을 구성합니다. title 매개변수는 창 제목(데스크톱)과 접근성에 사용됩니다. theme 및 darkTheme 매개변수는 다양한 모드에서 애플리케이션의 모양을 정의합니다.

MaterialApp의 구조 및 매개변수

MaterialApp은 30개 이상의 매개변수를 허용하며, Material Design 설정, 라우팅, 테마 설정, 현지화, 오류 동작 및 플랫폼별 설정 범주로 나뉩니다. 주요 매개변수를 알면 추가 코드 없이 애플리케이션을 유연하게 구성할 수 있습니다.

주요 구성 매개변수

title 매개변수는 창 제목 및 접근성을 위한 애플리케이션 이름을 설정합니다. color는 Android 작업 전환기의 애플리케이션 색상을 정의합니다. debugShowCheckedModeBanner는 릴리스 빌드에서 디버그 모드 배너를 숨깁니다. showPerformanceOverlay는 성능 정보가 포함된 오버레이를 활성화합니다. supportDarkTheme은 애플리케이션이 다크 테마를 지원하는지 여부를 나타냅니다.

플랫폼별 매개변수

MaterialApp은 다양한 플랫폼에서 동작을 구성하는 매개변수를 제공합니다: restorationScopeId(Android에서 재시작 시 애플리케이션 상태 유지), scrollBehavior(다른 OS에서 스크롤 동작 구성), useMaterial3(Material 3(Material You) 활성화). Material 3는 동적 색상, 새로운 구성 요소 및 업데이트된 스타일을 추가합니다.

theme 및 darkTheme로 테마 설정

테마 설정은 MaterialApp의 주요 매개변수 중 하나입니다. theme 매개변수는 라이트 테마의 색상 팔레트, 타이포그래피, 구성 요소 모양 및 아이콘을 정의하는 ThemeData 객체를 허용합니다. darkTheme 매개변수는 다크 테마의 동등한 구성입니다. Flutter는 디바이스의 시스템 설정에 따라 자동으로 테마를 전환합니다.

ThemeData: 색 구성표

ThemeData에는 primarySwatch(기본 색상), colorScheme(확장된 Material 3 색 구성표), brightness(라이트 또는 다크), fontFamily(기본 글꼴), textTheme(텍스트 스타일), cardTheme, appBarTheme, buttonTheme 및 특정 구성 요소를 사용자 지정하는 수십 개의 다른 매개변수가 포함됩니다. Material 3에는 colorScheme을, Material 2에는 primarySwatch를 사용하세요.

Material 3 동적 색상

Material 3(Material You)는 Android 12+에서 디바이스 배경화면에서 추출된 동적 색상을 지원합니다. 활성화하려면 useMaterial3: true를 설정하고 colorScheme.fromSeed 또는 colorScheme.fromImageProvider를 사용하세요. 동적 색상은 자동으로 primary, secondary, tertiary, neutral 및 neutralVariant의 5가지 톤으로 조화로운 팔레트를 생성합니다.

위젯에서 테마 액세스

모든 위젯은 Theme.of(context)를 통해 현재 테마에 액세스할 수 있습니다. Theme.of는 colors, textTheme 및 기타 매개변수를 가져올 수 있는 ThemeData 객체를 반환합니다. 테마 변경(예: 라이트 모드와 다크 모드 간 전환)을 구독하려면 build 메서드 내에서 컨텍스트를 사용하세요 — Flutter가 테마 변경 시 위젯을 자동으로 다시 빌드합니다.

Container(
  color: Theme.of(context).colorScheme.primary,
  child: Text(
    "Themed text example",
    style: Theme.of(context).textTheme.headlineMedium,
  ),
)

이 예제에서 Theme.of(context)는 가장 가까운 MaterialApp에서 현재 테마를 가져옵니다. 배경색과 텍스트 스타일이 자동으로 현재 테마(라이트 또는 다크)와 일치합니다. 테마가 전환되면 Container와 Text가 업데이트된 ThemeData의 새 값으로 다시 빌드됩니다.

MaterialApp의 라우팅 및 탐색

MaterialApp은 Navigator를 통합합니다 — 화면 간 전환을 관리하는 스택 기반 네비게이터입니다. initialRoute, routes 및 onGenerateRoute 매개변수는 Flutter가 탐색을 처리하는 방식을 결정합니다. Navigator.push 및 Navigator.pushReplacement는 프로그래밍 방식으로 화면을 전환하고, Navigator.pop은 뒤로 돌아갑니다.

명명된 경로 (routes)

routes 매개변수는 Map<String, WidgetBuilder>를 허용하며, 키는 경로 이름(문자열)이고 값은 해당 화면의 위젯을 생성하는 함수입니다. 명명된 경로는 정적 탐색에 편리합니다: '/' (루트 경로)는 일반적으로 home에 해당하며, '/settings', '/profile'은 다른 화면입니다. Navigator.pushNamed(context, '/settings')는 설정 화면으로 이동합니다.

경로 생성 (onGenerateRoute)

onGenerateRoute는 routes에서 경로를 찾을 수 없을 때 호출되는 함수입니다. RouteSettings를 허용하고 MaterialPageRoute를 반환합니다. 이 접근 방식은 경로가 데이터에 의존하는 동적 탐색(예: /user/42)에 유용합니다. onGenerateRoute는 경로 이름을 구문 분석하고 매개변수를 추출하여 적절한 화면을 생성합니다.

딥 링크 및 명명된 라우팅

딥 링크를 지원하려면 onGenerateInitialRoute와 onGenerateRoute 매개변수를 함께 사용하세요. 딥 링크를 사용하면 URL(예: https://example.com/promo)을 통해 애플리케이션의 특정 화면을 열 수 있습니다. Flutter는 Android(intent filters를 통해) 및 iOS(universal links를 통해)에서 딥 링크를 처리하고 경로를 onGenerateRoute에 전달합니다.

MaterialApp(
  initialRoute: "/",
  routes: {
    "/": (context) => const HomePage(),
    "/settings": (context) => const SettingsPage(),
  },
  onGenerateRoute: (settings) {
    if (settings.name?.startsWith("/user/") == true) {
      final userId = settings.name!.split("/").last;
      return MaterialPageRoute(
        builder: (_) => UserPage(userId: userId),
      );
    }
    return null;
  },
)

이 예제에서 onGenerateRoute는 /user/42와 같은 동적 경로를 처리합니다. 정적 routes에서 경로를 찾을 수 없고 동적 패턴과 일치하지 않으면 Flutter는 오류 페이지를 표시하며, 이는 onUnknownRoute를 통해 사용자 지정할 수 있습니다.

현지화 및 국제화

MaterialApp은 localizationsDelegates 및 supportedLocales 매개변수를 통해 내장된 현지화 지원을 제공합니다. LocalizationsDelegates는 현지화된 문자열을 로드하고, supportedLocales는 애플리케이션이 지원하는 언어를 결정합니다. Flutter는 자동으로 디바이스 언어를 감지하고 해당 현지화된 리소스를 로드합니다.

supportedLocales 및 localizationsDelegates 구성

supportedLocales 매개변수는 애플리케이션이 지원하는 Locale 목록을 허용합니다: [const Locale('en'), const Locale('ru'), const Locale('de')]. localizationsDelegates는 현지화된 문자열을 로드하는 위임자 목록입니다. Material Design의 경우 GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate 및 GlobalCupertinoLocalizations.delegate를 추가하세요.

애플리케이션 문자열 현지화

자체 문자열을 현지화하려면 flutter_localizations 또는 intl 패키지를 통해 생성된 AppLocalizations 클래스를 사용하세요. AppLocalizations는 현지화된 문자열에 액세스하는 정적 메서드를 제공합니다: AppLocalizations.of(context)!.helloMessage. MaterialApp은 자동으로 Localizations를 Widget Tree에 전달하여 컨텍스트를 통해 액세스할 수 있게 합니다.

• flutter_localizations — Material 위젯 및 시스템 문자열 현지화를 위한 공식 패키지입니다.
• intl — 국제화를 위한 패키지: 숫자, 날짜, 통화 형식 지정 및 복수형 처리.
• ARB 파일 — flutter_localizations 및 intl에서 사용하는 현지화된 문자열 저장 형식입니다.

MaterialApp vs CupertinoApp vs WidgetsApp

Flutter는 다양한 플랫폼을 위한 세 가지 루트 위젯을 제공합니다: MaterialApp(Android 및 웹용 Material Design), CupertinoApp(iOS 스타일), WidgetsApp(스타일링 없는 기본 위젯). 루트 위젯의 선택은 전체 애플리케이션의 모양과 플랫폼별 구성 요소의 가용성을 결정합니다.

MaterialApp: 범용 선택

MaterialApp은 Android, 웹 및 데스크톱에서 뛰어난 외관을 제공하는 Material Design 지원 덕분에 대부분의 애플리케이션에 적합합니다. Material Design은 풍부한 구성 요소 라이브러리를 제공합니다: Scaffold, AppBar, BottomNavigationBar, Drawer, SnackBar, Dialog 등. MaterialApp은 동적 색상이 포함된 Material 3도 지원합니다.

CupertinoApp: iOS 스타일

CupertinoApp은 Apple의 Human Interface Guidelines을 따르는 Cupertino Design을 사용합니다. CupertinoPageScaffold, CupertinoNavigationBar, CupertinoTabBar 및 기타 iOS 스타일 구성 요소를 제공합니다. iOS 애플리케이션이거나 모든 플랫폼에서 Apple 스타일을 따르는 애플리케이션에는 CupertinoApp을 사용하세요.

WidgetsApp: 최소 루트

WidgetsApp은 스타일링이 없는 기본 루트 위젯입니다. Navigator, MediaQuery 및 Localizations를 추가하지만 테마나 Material/Cupertino 구성 요소는 제공하지 않습니다. WidgetsApp은 사용자 지정 디자인 시스템, 게임 또는 Material이나 Cupertino가 과도한 자체 스타일링 애플리케이션에 적합합니다.