위젯 트리 시작: main() 함수 안에서 runApp() 함수를 호출해 플러터 위젯 트리를 시작한다.
runApp() 함수에 전달되는 위젯이 앱의 루트(root) 위젯이 되어 화면에 표시된다.
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() 함수는 플러터 앱의 시작점이면서, 앱의 전체 흐름과 구조를 정의하는 중요한 역할을 한다.
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를 쉽게 만들 수 있다.