[Flutter와 Dart] Cross Platform App 개발해보기 (0) - 소개

Flutter는 Google에서 개발한 크로스 플랫폼 UI 프레임워크로, Dart 언어를 사용하여 단일 코드베이스로 다양한 플랫폼(iOS, Android, 웹 등)에서 동작하는 애플리케이션을 개발할 수 있다.

 

---

Dart 언어란?

Dart는 Google에서 개발한 객체 지향 프로그래밍 언어로, Flutter의 주요 프로그래밍 언어로, 주요 특징은 다음과 같음:

• JIT(Just-In-Time)와 AOT(Ahead-Of-Time) 컴파일: 개발 중 빠른 디버깅(JIT)과 배포 시 최적화된 성능(AOT)을 제공.
• Sound Null Safety: Null 오류를 방지하여 안정적인 코드를 작성 가능.
• 간결한 문법: JavaScript와 유사한 문법으로 학습 곡선이 낮음.

---

Flutter란?

Flutter는 Google이 2018년에 출시한 오픈 소스 UI 프레임워크로, 하나의 코드베이스로 iOS, Android, 웹, 데스크톱 등 다양한 플랫폼에서 실행 가능한 애플리케이션을 개발할 수 있음. Flutter는 자체 렌더링 엔진(Skia)을 사용하여 일관된 UI를 제공하고, Flutter의 주요 특징은 다음과 같음:

• 크로스 플랫폼 지원: 단일 코드베이스로 여러 플랫폼에서 실행 가능.
• 고성능: Dart 언어를 사용하여 네이티브 코드로 컴파일되므로 빠른 실행 속도를 제공.
• 위젯 기반 구조: 모든 UI 요소가 위젯으로 구성되어 있어 재사용성과 커스터마이징이 용이.
• 핫 리로드(Hot Reload): 코드 변경 사항을 즉시 확인 가능, 생산성 향상.

---

Flutter의 기본 구조

Flutter 앱은 위젯 트리를 기반으로 UI를 구성. 모든 UI 요소는 위젯으로 표현되며, 위젯은 크게 두 가지로 나뉨:

1. StatelessWidget: 상태가 변하지 않는 위젯.
2. StatefulWidget: 상태가 변할 수 있는 위젯.

예제 코드: Flutter 기본 앱

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter Counter App')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text('$_counter', style: Theme.of(context).textTheme.headline4),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

---

Dart의 기본 문법

• 변수 선언

var name = 'Alice'; // 타입 추론 int age = 25; // 명시적 타입

 

• 조건문과 반복문

if (age > 18) { print('Adult'); } else { print('Minor'); } for (var i = 0; i < 5; i++) { print(i); }

• 함수

int add(int a, int b) => a + b; // 간결한 화살표 함수

• 클래스

class Person { String name; int age; Person(this.name, this.age); void sayHello() { print('Hello, my name is $name.'); } } void main() { var person = Person('Alice', 30); person.sayHello(); }

---

Flutter와 Dart의 장점

1. 생산성 향상: 핫 리로드 기능으로 빠르게 결과 확인 가능.
2. UI 일관성: Skia 엔진을 통해 다양한 플랫폼에서 동일한 UI 제공.
3. 강력한 커뮤니티와 생태계: 다양한 플러그인과 패키지 지원(Pub.dev).
4. 유연성: 플랫폼별 네이티브 기능도 쉽게 통합 가능.