flutter - main() 함수, MaterialApp

jokil·2023년 12월 20일
0

플러터

목록 보기
14/15

main() 함수란?

플러터 앱에서 main() 함수는 앱이 시작되는 지점이다.
모든 플러터 앱에는 이 main() 함수가 있어야 하고, 여기서 앱의 실행이 시작된다.
main()은 플러터 앱의 진입점(entry point)이라고 할 수 있다.

main() 함수의 역할

앱 실행: 플러터 앱이 시작될 때, main() 함수가 가장 먼저 호출된다.
여기서 플러터 프레임워크가 초기화되고, 첫 번째 화면이나 위젯이 로드된다.

위젯 트리 시작: main() 함수 안에서 runApp() 함수를 호출해 플러터 위젯 트리를 시작한다.
runApp() 함수에 전달되는 위젯이 앱의 루트(root) 위젯이 되어 화면에 표시된다.


main() 함수의 예제
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '내 첫 플러터 앱',
      home: Scaffold(
        appBar: AppBar(
          title: Text('안녕 플러터!'),
        ),
        body: Center(
          child: Text('여기서 시작해볼까?'),
        ),
      ),
    );
  }
}

이 예제에서 main() 함수는 runApp()을 호출하고 있다.
runApp()에는 MyApp이라는 위젯이 전달되는데, 이게 바로 앱의 루트 위젯이다.
MyApp 위젯은 MaterialApp을 리턴하는 StatelessWidget으로, 앱의 기본 구조를 정의한다.

MaterialApp 위젯 안에는 앱의 타이틀, 홈 화면 등이 정의돼 있다.
여기서 Scaffold 위젯은 기본적인 앱 레이아웃(툴바, 본문 등)을 제공하고, Center와 Text 위젯으로 화면 중앙에 텍스트를 표시하고 있다.

이렇게 main() 함수는 플러터 앱의 시작점이면서, 앱의 전체 흐름과 구조를 정의하는 중요한 역할을 한다.



MaterialApp

플러터에서 MaterialApp 위젯은 머티리얼 디자인(Material Design)을 기반으로 하는 애플리케이션을 만들기 위한 위젯이다.
머티리얼 디자인은 구글에서 제작한 디자인 언어로, 깔끔하고 직관적인 사용자 인터페이스를 만드는 데 도움을 준다.

MaterialApp의 주요 특징

머티리얼 디자인 구현: MaterialApp은 머티리얼 디자인의 다양한 요소들을 쉽게 구현할 수 있게 해준다. 네비게이션과 라우팅: 화면 간 이동(네비게이션)과 경로(라우팅) 관리를 쉽게 할 수 있다.
테마 설정: 앱 전체의 색상, 글꼴 등의 테마를 설정할 수 있다.
로케일 및 국제화 지원: 다양한 언어와 지역 설정을 지원한다.

MaterialApp의 사용 예제
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '내 첫 플러터 앱',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('홈 페이지'),
      ),
      body: Center(
        child: Text('안녕, 플러터!'),
      ),
    );
  }
}

이 코드에서 MyApp 클래스는 MaterialApp을 리턴하는 StatelessWidget이다.
MaterialApp 위젯은 앱의 주요 속성들을 정의한다.

title: 장치의 작업 관리자에서 앱을 대표하는 문자열.
theme: 앱의 전반적인 테마를 설정. 예를 들어, 여기서는 기본 색상으로 블루를 사용하고 있다.
home: 앱이 실행될 때 처음 보여줄 화면. 여기서는 MyHomePage 클래스가 이 역할을 한다.
MyHomePage는 홈 화면의 레이아웃을 정의하는데, 여기서는 간단히 앱 바와 텍스트를 중앙에 배치했다.

MaterialApp을 사용하면, 플러터 앱을 구축할 때 일관된 머티리얼 디자인을 적용할 수 있어서 개발자들에게 매우 유용하다, 앱을 만들 때 이 위젯을 잘 활용하면 멋진 UI를 쉽게 만들 수 있다.

profile
주니어 개발자에서 점핑점핑

0개의 댓글