Flutter 코드랩 가이드라인

Published in

Flutter Seoul

11 min readJun 28, 2019

이 글은 2019년 6월 29일 (토) 진행 예정인 Flutter 코드랩을 위한 가이드라인입니다. 지난 글과 마찬가지로 해당 코드랩에 참여하지 않아도 이 글을 통해 Flutter에 입문하실 수 있습니다.

이 가이드라인은 개발을 처음 접하는 사람이더라도 짧게는 1시간, 길게는 3시간 내외로 진행이 가능합니다. Flutter가 Dart라는 다소 생소한 언어로 이루어져있기 때문에 Dart 언어에 대해 이해하는 과정이 필요하기 때문에 시간이 더 오래 소요될 수 있다는 점에 대해 사전에 공지드립니다.

Flutter란 무엇인가?
Flutter를 시작하기에 필요한 Dart 지식
Flutter 앱은 어떻게 생겼는가?
코드랩을 어떻게 진행하는가?

Flutter란 무엇인가?

Flutter는 하나의 코드 베이스로 여러 플랫폼을 한번에 대응할 수 있는 프레임워크입니다. 2015년 Sky라는 코드네임으로 처음 시작되어 활발하게 개발되고 있으며 2018년 12월 4일, 안정화된 버전인 1.0 버전이 나온 이후로 꾸준히 많은 사람들에게 사랑받고 있습니다.

Flutter에는 여러가지 특징이 있지만 대표적인 특징은,

Dart라는 언어로 구현되었으며 Dart 언어를 개발에 사용한다.
모든 것이 위젯으로 구성되어있다.
Google의 Skia 그래픽 라이브러리를 사용하여 저 수준의 렌더링을 지원하는 C++ 기반의 Flutter Engine을 사용하기 때문에 여타 크로스 플랫폼 지원 프레임워크에 비해 속도가 빠르다.

위의 세가지 특징은 Flutter의 장점이자 단점으로 다가오는 데, Dart 언어를 사용하는 것은 UI 개발에서 직관적이라는 장점을 가져올 수 있으나 Dart 언어를 사용하는 곳이 Flutter 밖에 없다는 단점이 있으며,

모든 것이 위젯으로 구성된 점은 대부분의 Flutter 프로그래밍이 Composition 기반으로 이루어져 간단한 위젯같은 경우 더 직관적이라는 장점은 있으나 복잡도가 깊어질 수록 코드가 난해해진다는 단점이 있습니다. 더 자세한 Flutter의 기술 오버뷰에 대해서는 아래 링크를 참고해보시길 바랍니다.

Technical Overview

What is Flutter?Flutter is a mobile app SDK for building high-performance, high-fidelity,apps for iOS and Android, from…

flutter.dev

현재 Flutter의 최신 버전은 1.5 버전이며 Android, iOS, Linux (Chrome OS), Web 플랫폼을 지원하고 있습니다. 추후에 더 많은 플랫폼을 지원할 예정이라고 하니 기대해보아도 좋을 거라 생각합니다. Flutter로 구현되어있는 앱들에 대해서는 아래 링크에서 살펴볼 수 있습니다.

Flutter Apps | It's All Widgets!

An open list of example apps made with Flutter include many open source samples.

itsallwidgets.com

Flutter를 시작하기에 필요한 Dart 지식

Flutter가 Dart로 구현되어있고, Dart를 이용해서 계속 구현하기 때문에 Dart 언어의 기본적인 특징에 대해서 알아두는 것이 도움이 됩니다.

Hello World

모든 Dart App은 main() 함수를 가집니다.

void main() {
  print('Hello World')
}

변수

대부분의 Dart 변수는 명시적으로 타입을 선언할 필요는 없습니다. 변수에 값이 들어가면 자동으로 타입을 추론합니다.

var name = "조은";
var age = 27;
var companies = ['SK', 'NTS', 'WOOWA', 'NAVER']
var image = {
  'tags': ['NAVER'],
  'url': 'path'
}

흐름 제어 문

IF 문과 for 문, while 같은 것들을 지원합니다.

if(condition) {
  // true
} else {
  // false
}for (var object in image) {
  print(object);
}for (int month = 1; month <= 12; month++) {
  print(month);
}while (age < 30) {
  age += 1;
}

함수

Dart에서는 함수의 인자와 반환 값에 타입을 선언하는 것을 권장한다고 합니다.

int fibonacci(int n) {
  if(n == 0 || n == 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}var result = fibonacci(20);

주석

Dart의 주석은 보통// 를 사용해 선언합니다.

// 주석/* 여러글 주석 */

import

import 를 이용해서 다른 라이브러리에서 정의한 API에 접근할 수 있습니다.

// Dart의 코어 라이브러리를 Import하고싶은 경우
import 'dart:math';

// 외부 패키지에서 라이브러리를 Import하고싶은 경우
import 'package:test/test.dart';

// 파일을 Import하고싶은 경우
import 'path/to/my_other_file.dart';

Classes

여타 객체지향 언어가 그러하듯 Dart에서도 Class를 지원합니다. 여러 class를 하나로 묶어서 하나의 어플리케이션을 구성한다고 생각하시면 편합니다.

class Person {
  // Person 클래스가 가지는 속성
  String name;
  
  Person(this.name) {
    // 생성자 함수를 선언하는 기본값
  }  // 이름만 초기화하는 함수
  Person.reset(String name) : this(null);  void describe() {
    print('Person: $name');
  }
}

이제 클래스를 아래와 같이 선언해서 사용할 수 있습니다.

var choeun = Person('조은');
choeun.describe();

앞으로 이제 밥먹듯이 사용될 예정이니 Class 문법은 천천히 익숙해지도록 합시다.

상속

Dart에서는 extends 키워드를 사용해 상속을 구현할 수 있습니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

이 경우 MyApp은 Flutter의 StatelessWidget 을 상속받아서 구현한 것이며, StatelessWidget 이 가지고 있던 Widget 을 override하고 있습니다. 지금 모든 것을 이해할 필요는 없습니다. (어려운 게 정상입니다)

이 외에도 다양한 Dart 언어의 특징이 있지만 우선 여기까지만 알아두도록 합시다. 더 자세한 것은 추후에 하나씩 설명할 예정입니다.

Flutter 앱은 어떻게 생겼는가?

Flutter에서 가장 간단한 Hello World 코드는 아래와 같습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    Center(
      child: Text('Hello, world!'),
    ),
  );
}

이제 하나씩 살펴봅시다.

// Flutter에서 사용하는 기초 라이브러리를 불러옵니다.
import 'package:flutter/material.dart';// 모든 Flutter 앱은 기본적으로 main을 하나 가져야합니다.
void main() {
  // Flutter의 Widget의 최상위 트리를 나타내는 함수입니다.
  // 함수의 인수로 Widget을 전달합니다.
  runApp(
    // 레이아웃 위젯으로, 화면의 중앙에 자식 위젯을 위치시킬 때 사용합니다.
    Center(
      // Center 위젯의 자식 위젯을 선언합니다.
      // 이 경우 Text 위젯이 Center 위젯의 자식 위젯입니다.
      child: Text('Hello World!'),
    ),
  );
}

Flutter의 모든 것은 위젯이고, 위젯의 조합을 통해 어플리케이션을 만드는 구조로 복잡한 UI를 만나게 되면 코드는 점점 길어집니다. 예를 들어 여러분이 이번 코드랩을 통해 만들게 되는 마지막 앱의 코드는 아래와 같습니다.

flutter/codelabs

Flutter codelab examples. Contribute to flutter/codelabs development by creating an account on GitHub.

github.com

한눈에 보기에는 복잡해보이지만 단계별로 잘 따라가다 보면 잘 익힐 수 있을 거라 생각합니다.

코드랩을 어떻게 진행하는가?

우선 Flutter를 설치해야합니다. Flutter 설치 과정은 제 지난 글에서 잘 설명하고 있기 때문에 해당 글을 살펴보시길 바랍니다.

Get Started with Flutter

내가 Flutter에 매력을 느낀 데에는 여러가지 이유가 있지만 대표적인 이유는 간결하고 직관적이라는 것이었다. HTML이나 CSS도 충분히 간결하지만 Flutter가 보여준 간결함이 더 직관적이라고 생각했기…

medium.com

설치를 모두 끝냈다면 Google에서 공식적으로 지원하는 코드랩을 참고하시길 바랍니다. 아래 링크에서 Flutter로 검색하시면 나옵니다.

Google Codelabs

Google Developers Codelabs provide a guided, tutorial, hands-on coding experience. Most codelabs will step you through…

codelabs.developers.google.com

여기서 제가 추천드리는 코스는 아래와 같은 코스입니다. Flutter 코드랩 참석자들을 대상으로 보낸 메일에도 똑같은 코스로 공유되어있습니다.

For Starter

모든 분들이 진행하시는 것을 권장합니다

For Beginner

Firebase로 DB를 연동하고, Material Components(MDC)를 통해 앱을 만드는 과정을 다룹니다. UI에 대해 더 이해하고 싶으신 분들은 Material Design을, DB연동을 원하는 분들을 DB 섹션을 참고하세요.

Material Design:

DB:

https://codelabs.developers.google.com/codelabs/flutter-firebase/

위 코스들을 모두 거친다면 Flutter의 기본적인 개념에 대해서는 모두 살펴볼 수 있을 것입니다. 코드랩을 모두 마친 후에는 여러 개념을 더 익힐 수 있지만, Dart에 대해서 더 깊이 이해할 수도 있고 Flutter 자체를 더 깊이 팔 수도 있습니다.

끝

Flutter는 다른 멀티 플랫폼 프레임워크에 비해 비교적 늦게 나온 프레임워크지만 그 성능과 간결함으로 많은 기업과 개발자들이 관심을 가지고 있는 프레임워크입니다.

많은 분들이 이 가이드라인을 통해서 Flutter에 입문하셨으면 좋겠습니다. 궁금하신 점은 댓글 또는 메일로 전달주시길 바랍니다.

고맙습니다.