플러터(Flutter)는 구글에서 개발한 오픈 소스 UI 소프트웨어 개발 키트(SDK)로, 모바일, 웹, 데스크톱 애플리케이션을 빠르게 구축할 수 있게 해줍니다. 플러터의 매력 중 하나는 하나의 코드베이스로 여러 플랫폼에서 애플리케이션을 구축할 수 있다는 점입니다. 이번 강좌에서는 플러터 애플리케이션의 중심이 되는 main.dart 파일의 기본 코드 구성에 대해 자세히 알아보겠습니다.
1. main.dart 파일의 역할
main.dart 파일은 플러터 애플리케이션의 진입점(entry point)입니다. 애플리케이션이 실행되면 가장 먼저 실행되는 파일로, 이 파일 내에서 애플리케이션의 주요 구조와 UI를 정의합니다.
주요 역할:
- 애플리케이션의 설정 및 초기화
- 최상위 위젯의 구성
- 루트 위젯의 선언
1.1 기본 구조
기본적인 main.dart 파일은 다음과 같은 구조로 시작합니다:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '플러터 강좌',
home: Scaffold(
appBar: AppBar(
title: Text('메인 페이지'),
),
body: Center(
child: Text('안녕하세요, 플러터!'),
),
),
);
}
}
2. 코드 구성 요소
위의 예제 코드를 분석하여 각 부분의 역할을 살펴보겠습니다.
2.1 필요한 패키지 임포트
플러터의 기능을 사용하기 위해 필요한 패키지를 임포트합니다. flutter/material.dart 패키지는 Material Design UI 구성 요소를 제공하며, 이를 통해 간편하게 라우팅 및 상태 관리를 할 수 있습니다.
2.2 main() 함수
플러터 애플리케이션의 진입점인 main() 함수는 runApp() 함수를 통해 루트 위젯을 실행합니다. 여기서는 MyApp 클래스를 인스턴스화하여 실행하고 있습니다.
2.3 StatelessWidget
MyApp 클래스는 StatelessWidget을 상속받습니다. 이는 상태가 없는 위젯을 의미하며, UI를 그릴 때 사용되는 데이터가 변하지 않는 경우에 적합합니다.
2.4 build() 메서드
build() 메서드는 위젯의 UI를 생성하는 역할을 하며, BuildContext를 매개변수로 받습니다. build() 메서드 내에서 MaterialApp과 Scaffold와 같은 위젯들을 정의합니다. Scaffold는 기본적인 앱 레이아웃을 제공하는 위젯입니다.
3. 예제 애플리케이션의 개선
기본 코드를 사용하여 간단한 애플리케이션을 만들 수 있지만, 더 많은 기능을 추가하여 개선할 수 있습니다. 아래는 기본 애플리케이션에 버튼을 추가하고 클릭했을 때 텍스트가 변경되는 기능을 추가한 예제입니다.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State {
String message = '안녕하세요, 플러터!';
void _changeMessage() {
setState(() {
message = '버튼이 클릭되었습니다!';
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '플러터 강좌',
home: Scaffold(
appBar: AppBar(
title: Text('메인 페이지'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(message),
SizedBox(height: 20),
ElevatedButton(
onPressed: _changeMessage,
child: Text('메시지 변경'),
),
],
),
),
),
);
}
}
3.1 StatefulWidget 추가
위 예제에서는 상태가 변할 수 있으므로 StatelessWidget 대신 StatefulWidget을 사용했습니다. StatefulWidget은 내부 상태를 가지고 있으며, UI가 변경될 수 있는 경우에 사용합니다.
3.2 setState() 메서드
버튼 클릭 시 _changeMessage() 메서드를 호출하여 상태를 업데이트하고, setState()를 사용하여 UI를 다시 그립니다. 이렇게 하면 애플리케이션이 동적으로 반응하는 UI를 만들 수 있습니다.
4. 플러터의 위젯 구조
플러터의 UI는 위젯(Widgets)로 구성됩니다. 모든 UI 요소는 위젯으로 표현되며, 위젯은 서로 결합하여 복잡한 UI를 구성할 수 있습니다. 위젯은 크게 두 가지로 나눌 수 있습니다:
- StatelessWidget: 상태가 변하지 않으며, 정적인 UI를 가진 위젯
- StatefulWidget: 내부 상태를 가지고 있으며, 상태에 따라 UI가 변경될 수 있는 위젯
5. 플러터 프로젝트 구조
플러터 프로젝트는 여러 디렉토리와 파일로 구성되어 있습니다. 기본적으로 생성되는 파일 구조는 다음과 같습니다:
lib/– 공통적으로 사용되는 Dart 파일을 포함pubspec.yaml– 의존성 및 자원 관리 파일android/– 안드로이드 관련 설정과 코드ios/– iOS 관련 설정과 코드
6. 결론
이번 강좌에서는 플러터에서 기본적인 main.dart 파일의 구조와 구성요소에 대해 살펴보았습니다. 애플리케이션은 main.dart 파일을 통해 실행되며, 위젯의 조합을 통해 UI를 만들 수 있습니다. StatelessWidget과 StatefulWidget을 활용하여 동적인 애플리케이션을 구축하는 방법도 익혔습니다. 나중에 더 복잡한 UI를 구성할 때, 이번 기초 강좌가 큰 도움이 될 것입니다.
플러터에 대한 더 많은 정보와 깊이 있는 강좌를 위해 계속해서 학습해보세요! 다음 강좌에서는 더 다양한 위젯과 플러터의 고급 기능에 대해 알아보겠습니다.