Flutter

Flutter - MaterialApp

Mr. Joo 2023. 11. 8. 11:52
728x90

MaterialApp

안드로이드 디자인을 기반으로 앱 작성
(디자인만 적용이라 안드, IOS 둘 다 빌드 가능)

CupertinoApp

애플 디자인을 기반으로 앱 작성
(디자인만 적용이라 안드, IOS 둘 다 빌드 가능)

MaterialApp의 역할

  • MaterialApp은 Flutter 앱의 최상위 위젯
  • 앱이 시작될 때 생성되는 첫 번째 위젯.

앱을 구축하는 데 필수적인 몇 가지 중요한 기능을 제공

  • 내비게이션: MaterialApp은 앱의 화면 사이를 쉽게 이동할 수 있는 내장 내비게이션 시스템을 제공한다.
  • 테마: 머티리얼 디자인에는 디자인 언어를 사용하는 모든 앱에서 일관된 모양과 느낌을 만드는 데 사용되는 사전 정의된 색상, 타이포그래피 및 기타 디자인 요소 세트가 있다. MaterialApp은 테마를 사용하여 이러한 디자인 요소를 앱에 쉽게 적용할 수 있는 방법을 제공한다.
  • 위젯: MaterialApp에는 앱의 사용자 인터페이스를 생성하는 데 사용할 수 있는 사전 제작된 머티리얼 디자인 위젯 세트가 제공된다. 이러한 위젯에는 버튼, 텍스트 필드, 대화 상자 등이 포함된다.
  • 현지화: MaterialApp은 앱의 텍스트 및 기타 콘텐츠를 다른 언어로 현지화하기 위한 내장 지원을 제공한다.

생성자 매개변수

앱 메타데이터

  • title : 앱의 제목.
  • theme : 앱의 색상, 글꼴 및 텍스트를 정의하는 ThemeData.
  • debugShowCheckedModeBanner : 디버그 장식을 설정 및 제거.

네이비게이션

  • initialRoute : 앱의 초기 경로 지정.
  • routes : 앱에서 화면을 이동하기 위한 경로들을 설정.
  • onGenerateRoute : routes에 정의되지 않은 경로로 이동할 때 호출되는 함수.
  • navigatorObservers : 앱의 탐색 상태가 변경될 때 알림을 받는 역할, 분석 및 로깅 목적.

국제화 (앱의 언어)

  • locale : 앱의 기본 로케일을 지정.
  • localizationsDelegates : 다양한 언어 또는 방언에 대한 번역.
  • supportedLocales : 앱이 지원하는 지역을 지정.

기타

  • home : 앱 실행 시 표시되는 위젯. home을 설정하면 initialRoute 매개변수를 재정의한다.
  • navigatorKey : 화면들을 프로그래밍 방식으로 이동하는 데 사용할 수 있는 네비게이터 객체에 대한 엑세스를 제공하는 GlobalKey이다.
  • builder : 새 경로가 네비게이터에 푸시 될 때 마다 호출되는 함수. 사용자 지정 전환 애니메이션 등에 사용한다.

예시

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}
728x90
LIST