플러터 강좌: 6.3 플러터 기본 코드 이해하기 1

안녕하세요! 이번 강좌에서는 플러터의 기본 코드 구조를 이해하고, 플러터 애플리케이션을 만드는 데 필요한 기초적인 내용을 깊이 있게 살펴보겠습니다.

1. 플러터란?

플러터는 구글이 개발한 오픈 소스 UI 소프트웨어 개발 키트(SDK)로, 단일 코드베이스로 iOS와 Android 플랫폼 모두에서 사용할 수 있는 애플리케이션을 만들 수 있게 해줍니다. 플러터는 빠른 성능과 높은 생산성을 제공하며, 직관적인 UI 위젯을 통해 매력적인 사용자 인터페이스를 디자인하는 데 필요한 도구를 제공합니다.

2. 플러터 애플리케이션 구조

플러터 애플리케이션은 여러 파일과 디렉토리로 구성되어 있습니다. 일반적으로 아래와 같은 구조를 가지고 있습니다: 

my_flutter_app/
├── android/
├── ios/
├── lib/
│   └── main.dart
├── test/
└── pubspec.yaml
  • android/: 안드로이드 플랫폼 관련 파일을 포함합니다.
  • ios/: iOS 플랫폼 관련 파일을 포함합니다.
  • lib/: 플러터 애플리케이션의 주요 코드가 위치하는 디렉토리입니다. 일반적으로 ‘main.dart’ 파일이 이곳에 있습니다.
  • test/: 테스트 코드를 포함합니다.
  • pubspec.yaml: 애플리케이션의 메타데이터, 의존성 및 리소스를 정의하는 파일입니다.

3. main.dart 파일 분석하기

‘lib’ 디렉토리 안에 있는 ‘main.dart’ 파일은 플러터 애플리케이션의 진입점입니다. 이 파일에서 애플리케이션이 시작되는 코드를 확인할 수 있습니다. 예를 들어, 다음은 간단한 플러터 애플리케이션의 ‘main.dart’ 파일입니다:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Flutter App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('홈 화면'),
        ),
        body: Center(
          child: Text('안녕하세요, 플러터!'),
        ),
      ),
    );
  }
}

3.1. runApp() 함수

runApp() 함수는 플러터 애플리케이션을 실행하는 데 사용됩니다. 이 함수는 최상위 위젯인 ‘MyApp’ 클래스를 인자로 받아 애플리케이션을 시작합니다.

3.2. MyApp 클래스

MyApp 클래스는 StatelessWidget을 상속받습니다. StatelessWidget은 상태를 가지지 않는 위젯이며, 생성 후에는 변경되지 않습니다. MyApp의 build 메서드에서는 MaterialApp 위젯을 반환합니다.

3.3. MaterialApp 위젯

MaterialApp 위젯은 애플리케이션의 스타일과 내비게이션을 설정하는 데 사용됩니다. 여기서 title 속성은 애플리케이션의 타이틀을 설정하고, home 속성은 애플리케이션의 홈 화면을 정의합니다.

3.4. Scaffold 위젯

Scaffold 위젯은 플러터의 기본 UI 레이아웃 구조를 제공합니다. Scaffold 위젯을 사용하면 앱바(AppBar), 본문(Body), 플로팅 액션 버튼(Floating Action Button) 등 다양한 UI 요소를 쉽게 넣을 수 있습니다.

3.5. AppBar와 Center 위젯

AppBar 위젯은 상단에 고정된 앱바를 생성하며, 제목을 지정할 수 있습니다. Center 위젯은 자식 위젯을 중앙에 위치시키는 데 사용되며, Text 위젯을 통해 사용자에게 “안녕하세요, 플러터!”라는 메시지를 표시합니다.

4. 위젯의 개념

플러터에서 모든 것은 위젯으로 구성됩니다. 위젯은 사용자 인터페이스의 구성 요소로, 텍스트, 이미지, 버튼 등을 포함합니다. 플러터에서는 위젯을 조합하여 복잡한 UI를 만들 수 있습니다. 위젯은 크게 두 가지 종류로 나뉩니다:

  • StatelessWidget: 상태가 없는 위젯으로, 생성된 후 변경되지 않습니다.
  • StatefulWidget: 내부 상태를 가지며, 상태가 변경될 때마다 UI를 다시 그립니다.

5. 기본 UI 구성 요소

플러터에서 자주 사용되는 기본 UI 구성 요소에 대해 살펴보겠습니다.

5.1. Text 위젯

Text('안녕하세요, 플러터!')

Text 위젯은 문자열을 표시하는 데 사용됩니다. 기본적인 텍스트 스타일을 제공하며, 다양한 속성을 통해 글자 크기, 색상 등을 조정할 수 있습니다.

5.2. Container 위젯

Container(
  width: 200,
  height: 200,
  color: Colors.blue,
)

Container 위젯은 사각형 박스를 만들고, 크기, 색상, 여백 및 패딩 등의 속성을 설정할 수 있습니다. 이는 UI 요소를 배치하고 스타일링하는데 매우 유용합니다.

5.3. Row 및 Column 위젯

Row(
  children: [
    Icon(Icons.star),
    Text('Star'),
  ],
)

Column(
  children: [
    Text('첫 번째 항목'),
    Text('두 번째 항목'),
  ],
)

Row 위젯은 수평으로 자식 위젯을 나열하며, Column 위젯은 수직으로 나열합니다. 이러한 레이아웃 위젯은 UI 디자인에 필수적입니다.

5.4. 버튼(Button) 위젯

ElevatedButton(
  onPressed: () {
    // 버튼 클릭 시 실행될 코드
  },
  child: Text('클릭하세요'),
)

버튼을 생성하는 다양한 위젯이 있으며, ElevatedButton, TextButton, OutlinedButton 등 다양한 스타일의 버튼을 제공합니다.

6. 상태 관리(State Management)

플러터에서 상태 관리는 매우 중요한 개념입니다. 상태 관리는 위젯의 상태를 효과적으로 관리하여 UI를 업데이트하는 데 필요한 방법입니다. 다양한 상태 관리 방식이 있으며, 다음은 몇 가지 주요 방법입니다:

  • setState(): StatefulWidget 내부에서 상태를 변경할 때 사용됩니다.
  • InheritedWidget: 위젯 트리 전반에 걸쳐 데이터를 공유하는 방법입니다.
  • Provider 패키지: 더 복잡한 상태 관리를 위하여 많이 사용되는 패키지입니다.

7. 애플리케이션 디자인 모범 사례

플러터 애플리케이션을 설계할 때는 몇 가지 모범 사례를 따르는 것이 좋습니다:

  • 코드를 모듈화하여 재사용성과 유지보수성을 높이세요.
  • 위젯을 작은 단위로 나누어 복잡성을 줄이세요.
  • 상태 관리 방식을 명확히 하여 코드의 가독성을 높이세요.

8. 결론

이번 강좌에서는 플러터 애플리케이션의 기본 코드 구조를 이해하고, 위젯, 애플리케이션 디자인, 상태 관리에 대한 기초 개념을 살펴보았습니다. 다음 강좌에서는 더 복잡한 플러터 애플리케이션을 만드는 방법에 대해 논의할 예정입니다. 감사합니다!