[Flutter] MaterialApp과 CupertinoApp

MaterialApp과 CupertinoApp

Flutter는 쿠퍼티노 디자인 혹은 머터리얼 디자인중 하나를 사용하게 되는데 둘의 차이점은 각각 MeterialApp 은 안드로이드의 디자인이고 CupertinoApp은 Ios디자인이다. 

 

MaterialApp

• 구글의 머터리얼 디자인(Material Design) 가이드라인을 기반으로 앱을 구성하는 최상위 위젯이다.
• Flutter로 안드로의 스타일 앱을 만들때 주로 사용한다.
• ios를 포함한 다른 플랫폼에서도 문제가 되지 않으며, Material Design을 사용하고 싶다면 모든 플랫폼에 대해 MaterialApp을 사용할 수 있다.

주요 속성

• home: 앱이 실행되었을 때 처음으로 표시할 위젯
• theme: 머터리얼 디자인 테마를 설정할 수 있는 파라미터.
• routes: 라우팅을 정의하여 화면을 전환할 때 사용.
• initialRoute: 최초로 표시할 라우트를 정의할 때 사용.
• onGenerateRoute / onUnknownRoute: 동적으로 라우트를 생성하거나, 존재하지 않는 라우트 접근 시 처리할 수 있는 콜백.

장점

 

• 머터리얼 디자인 컴포넌트 지원
  버튼, 탭바(TabBar), 스낵바(SnackBar), 다이얼로그(Dialog) 등 다양한 머터리얼 위젯을 기본으로 제공한다.
• 직관적인 테마 설정
  MaterialApp 전체에 동일한 테마(색상, 폰트, 스타일)를 입히면 앱 전체 위젯에 쉽게 적용할 수 있다.
• 플랫폼 무관
  안드로이드는 물론, iOS, 웹, 데스크톱까지 Material Design UI를 일관되게 사용할 수 있다.

예시 코드

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'MaterialApp Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MaterialApp Example'),
      ),
      body: Center(
        child: Text('Hello, Material World!'),
      ),
    );
  }
}

 

 

 

CupertinoApp

• CupertinoApp은 애플의 iOS 스타일, 즉 쿠퍼티노(Cupertino) 디자인을 기반으로 하는 앱을 구성할 때 사용하는 최상위 위젯이다.
• iOS 플랫폼 유저가 익숙한 UI 구성 요소(네비게이션 바, 탭바, 스위치 등)를 좀 더 자연스럽게 표현할 수 있다.

주요 속성

• home: 기본적으로 표시될 위젯.
• theme: CupertinoThemeData를 사용하여 iOS 스타일의 색상, 폰트 등을 지정할 수 있다.
• routes, initialRoute, onGenerateRoute 등 MaterialApp과 유사한 속성을 가지고 있으나, 머터리얼 디자인이 아닌 쿠퍼티노 디자인 요소들에 최적화되어 있다.

장점

1. iOS 친화적 UI
   iOS 디자인 가이드라인을 적용한 Cupertino 위젯들(CupertinoButton, CupertinoTabBar, CupertinoNavigationBar 등)을 기본으로 제공한다.
2. 네이티브 느낌 극대화
   iOS 사용자가 익숙하게 느끼는 인터랙션(애니메이션, 제스처, 터치 피드백 등) 구현이 용이하다.

예시 코드

import 'package:flutter/cupertino.dart';

void main() {
  runApp(CupertinoApp(
    title: 'CupertinoApp Demo',
    home: MyCupertinoPage(),
  ));
}

class MyCupertinoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('CupertinoApp Example'),
      ),
      child: Center(
        child: Text('Hello, Cupertino World!'),
      ),
    );
  }
}