[Flutter] 2. Flutter의 "기본 개념"

Flutter 학습: 기본 개념

Flutter는 Google에서 개발한 오픈 소스 UI 소프트웨어 개발 키트로, 다양한 플랫폼에서 일관된 사용자 경험을 제공할 수 있는 애플리케이션을 개발할 수 있습니다. 이번 글에서는 첫 번째 Flutter 앱인 Hello World 애플리케이션을 작성하고, Flutter 애플리케이션의 기본 구조와 위젯 트리를 이해하는 방법에 대해 알아보겠습니다.

---

1. Hello World 애플리케이션: 첫 번째 Flutter 앱 작성

Flutter를 사용하여 가장 기본적인 "Hello World" 애플리케이션을 작성해보겠습니다.

 

1. Flutter 프로젝트 생성:

• Visual Studio Code 또는 Android Studio에서 Flutter 프로젝트를 생성합니다.
• 명령어로 생성하려면 터미널에서 다음 명령어를 입력합니다.

flutter create hello_world
cd hello_world

 

 

2. main.dart 파일 수정:

• lib/main.dart 파일을 열고, 다음과 같이 수정합니다.

[dart]

 

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('Hello World App'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

 

3. 애플리케이션 실행:

• Android Studio나 Visual Studio Code에서 에뮬레이터를 실행하고, main.dart 파일을 실행합니다.
• 터미널에서 다음 명령어를 실행하여 애플리케이션을 실행할 수도 있습니다.

flutter run

 

이제 "Hello, World!" 메시지가 화면에 표시된 간단한 Flutter 애플리케이션이 실행됩니다.

---

2. 기본 구조 이해: main.dart, MaterialApp, Scaffold

Flutter 애플리케이션의 기본 구조를 이해하는 것은 매우 중요합니다. Flutter 애플리케이션은 위젯 트리로 구성되어 있으며, 주요 요소는 main.dart, MaterialApp, Scaffold입니다.

 

main.dart 파일:

• Flutter 애플리케이션의 진입점입니다. main 함수에서 runApp 함수를 호출하여 최상위 위젯을 실행합니다.

예제:

[dart]

 

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

 

 

MaterialApp 위젯:

• Flutter 애플리케이션의 기본 설정을 제공하는 위젯입니다. 테마, 라우팅, 로컬라이제이션 등의 설정을 포함합니다.

예제:

[dart]

 

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

 

Scaffold 위젯:

• Material Design 기본 레이아웃 구조를 제공합니다. AppBar, Drawer, BottomNavigationBar, FloatingActionButton 등을 포함할 수 있습니다.

예제:

[dart]

 

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
    );
  }
}

 

이 구조를 통해 Flutter 애플리케이션의 기본 레이아웃을 설정하고 구성할 수 있습니다.

---

3. 위젯 트리 이해: StatelessWidget, StatefulWidget

Flutter에서 모든 것은 위젯으로 구성됩니다. 위젯은 불변 상태의 StatelessWidget과 변할 수 있는 상태를 가지는 StatefulWidget으로 나뉩니다.

 

StatelessWidget:

• 상태가 변하지 않는 위젯입니다. 화면에 고정된 내용을 표시할 때 사용됩니다.

예제:

[dart]

 

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stateless Widget Example'),
        ),
        body: Center(
          child: Text('This is a Stateless Widget'),
        ),
      ),
    );
  }
}

 

 

StatefulWidget:

• 상태가 변할 수 있는 위젯입니다. 사용자 입력, 애니메이션 등 상태가 변경될 수 있는 UI 요소를 표시할 때 사용됩니다.

예제:

[dart]

 

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stateful Widget Example'),
        ),
        body: Center(
          child: CounterWidget(),
        ),
      ),
    );
  }
}

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Counter: $_counter'),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

 

위의 예제에서 CounterWidget 클래스는 상태를 가지며, 버튼을 눌렀을 때 상태가 변경되고 화면이 업데이트됩니다.

---

이 글에서는 Flutter의 기본 개념인 Hello World 애플리케이션 작성, Flutter 애플리케이션의 기본 구조, 그리고 위젯 트리를 이해하는 방법에 대해 알아보았습니다. Flutter의 기본 개념을 이해하고 나면, 더 복잡한 애플리케이션을 개발할 수 있는 기초를 쌓을 수 있습니다. Happy Coding!