Flutter의 기본 개념과 간단한 예제

Flutter는 구글에서 개발한 크로스 플랫폼 UI 프레임워크로, 단일 코드베이스로 iOS, Android, 웹, 데스크톱 애플리케이션을 개발할 수 있습니다. Flutter의 핵심 개념과 특징을 살펴보고, 간단한 예제를 통해 기본적인 사용법을 알아보겠습니다.

 

Flutter의 핵심 개념

1. 위젯 (Widgets)

Flutter에서는 모든 UI 요소가 위젯으로 구성됩니다. 텍스트, 버튼, 레이아웃 등 모든 것이 위젯입니다. 위젯은 크게 두 가지로 나뉩니다:

• StatelessWidget: 상태가 변하지 않는 정적인 위젯
• StatefulWidget: 상태가 변할 수 있는 동적인 위젯

2. 상태 관리 (State Management)

StatefulWidget에서는 상태를 관리할 수 있습니다. setState() 메서드를 사용하여 위젯의 상태를 변경하고 UI를 업데이트할 수 있습니다.

3. 레이아웃 시스템

Flutter는 유연한 레이아웃 시스템을 제공합니다. Row, Column, Stack 등의 위젯을 사용하여 복잡한 레이아웃을 구성할 수 있습니다.

4. 핫 리로드 (Hot Reload)

Flutter의 핫 리로드 기능을 사용하면 코드 변경 사항을 즉시 앱에 반영할 수 있어 개발 생산성이 크게 향상됩니다.

간단한 Flutter 예제

다음은 간단한 "Hello World" 앱을 만드는 예제입니다:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My First Flutter App'),
        ),
        body: Center(
          child: Text(
            'Hello, Flutter!',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

이 예제에서:

1. main() 함수에서 runApp()을 호출하여 앱을 시작합니다.
2. MyApp 클래스는 StatelessWidget을 상속받아 정적인 UI를 구성합니다.
3. MaterialApp 위젯은 머티리얼 디자인을 적용합니다.
4. Scaffold 위젯은 기본적인 앱 구조를 제공합니다.
5. AppBar와 Center 위젯을 사용하여 레이아웃을 구성합니다.
6. Text 위젯으로 "Hello, Flutter!" 메시지를 표시합니다.

결론

Flutter는 직관적인 위젯 기반 구조와 강력한 개발 도구를 제공하여 효율적인 크로스 플랫폼 앱 개발을 가능하게 합니다. 기본 개념을 이해하고 실습을 통해 익히면, 빠르게 다양한 플랫폼용 앱을 개발할 수 있습니다. Flutter의 풍부한 위젯 라이브러리와 활발한 커뮤니티 지원을 활용하면, 더욱 복잡하고 세련된 앱을 만들 수 있습니다.