플러터(Flutter) 기본 개념 익히기

플러터(Flutter)는 Google에서 개발한 오픈 소스 UI 소프트웨어 개발 툴킷이다. 무엇보다 플러터를 사용하면 하나의 코드베이스로 iOS, Android, Web, 그리고 Desktop 애플리케이션까지 개발할 수 있다는 점이 매력적이었다. Dart라는 언어를 기반으로 하는 플러터, 어떤 느낌일지 하나씩 차근차근 익혀볼까 한다.

플러터의 주요 특징

1. Hot Reload: 코드 변경 사항을 저장하자마자 앱에서 즉시 확인할 수 있어서 개발 프로세스를 빠르게 만들어 준다.

2. 리치한 위젯: 플러터는 수많은 재사용 가능한 위젯을 제공하여 UI를 빠르게 구축할 수 있게 해준다.

3. 높은 성능: 플러터 앱은 컴파일되어 기기에 직접 실행되므로 네이티브 앱과 유사한 성능을 보여준다.

4. 다양한 플랫폼 지원: 한 번의 코드 작성으로 iOS, Android, Web, 그리고 Desktop에서 동작하는 애플리케이션을 만들 수 있다.

기본적인 플러터 샘플 코드

다음은 간단한 플러터 앱의 샘플 코드이다. 버튼을 클릭할 때마다 카운터를 증가시키는 기능을 가지고 있다.


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 {
  MyHomePage({Key? key}) : super(key: key);

  @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 Sample 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),
      ),
    );
  }
}

샘플코드 설명

1. Import 구문

import 'package:flutter/material.dart';

이 구문은 플러터의 `material` 라이브러리를 가져온다. 이 라이브러리에는 앱을 만들 때 필요한 많은 위젯과 기능이 포함되어 있다.

2. 메인 함수

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

플러터 앱의 시작점입니다. `runApp` 함수는 전달받은 위젯을 화면에 그립니다.

3. MyApp 위젯

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

`MyApp`은 `StatelessWidget`의 하위 클래스이고, `StatelessWidget`은 불변성을 가지는 위젯이다. `MyApp` 위젯은 `MaterialApp` 위젯을 반환하는데, 이는 Material Design 스타일의 애플리케이션을 만들기 위한 기본 위젯이다.

4. MyHomePage 위젯

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

`MyHomePage`은 `StatefulWidget`의 하위 클래스이고, `StatefulWidget`은 동적인 상태를 가질 수 있는 위젯이다. `StatefulWidget`은 항상 별도의 `State` 클래스와 함께 사용된다. 여기서는 `_MyHomePageState`라는 `State` 클래스를 사용한다.

5. _MyHomePageState 클래스

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

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

  @override
  Widget build(BuildContext context) {
    ...
  }
}

`_MyHomePageState` 클래스는 `MyHomePage` 위젯의 상태를 관리한다. 여기서는 `_counter`라는 상태 변수와 `_incrementCounter`라는 메서드를 가지고 있다.

`_counter`: 화면에 표시될 숫자를 저장하는 변수이다.
`_incrementCounter`: 이 메서드는 버튼이 클릭될 때 호출되며, `_counter` 값을 증가시키는 역할을 한다. `setState` 함수는 상태가 변경될 때 위젯 트리를 다시 그리도록 플러터에 지시한다.

6. _MyHomePageState의 build 메서드

`build` 메서드는 화면에 어떻게 그려질 것인지 정의한다. 여기서는 `Scaffold` 위젯을 사용하여 기본적인 레이아웃을 정의하고 있다.

`AppBar`: 상단에 앱의 타이틀바를 표시한다.
`Center`: 자식 위젯을 화면 중앙에 위치시킨다.
`Column`: 여러 위젯을 세로로 배열한다.
`Text`: 화면에 텍스트를 표시한다.
`floatingActionButton`: 화면 오른쪽 하단에 위치하는 버튼이다. 이 버튼을 클릭하면 `_incrementCounter` 메서드가 호출된다.

이렇게 각 위젯은 자신의 자식 위젯들과 함께 계층적인 구조를 형성하며, 플러터 앱의 UI를 구성하게 된다.