Hello World with Flutter

Posted on by 솔천

Android Studio에서 새로운 Flutter Project를 생성합니다. SDK위치가 정확한지 확인하고, Next를 클릭합니다. 

프로젝트 이름을 입력하고, Organization에 도메인 주소를 범위가 넣은 순으로 적어준 뒤 Create버튼을 클릭합니다.

프로젝트를 생성하면 많은 코드가 자동으로 생성이 되는데 이는 Flutter가 우리를 위해서 만들어준 데모코드입니다. 사실 Flutter는 언어는 아니고 Dart라는 언어를 이용해서 만든 프레임워크입니다. 그래서 Flutter로 프로젝트를 생성하면 Dart로 쓰인 코드가 주르륵 자동으로 만들어지는 것입니다. 데모 코드를 만들어 주고 각종 라이브러리를 제공하고 어떻게 코딩을 할지 가이드를 해주는 것이 바로 Flutter가 하는 일입니다.

Flutter가 만들어준 코드는 다음에 보기로 하고 이번시간에는 간단하게 Hello World를 보여주는 거니까 main.dart파일을 열어 기존에 자동으로 생성된 코드를 다 지우고 아래 코드를 입력합니다. 

import 'package:flutter/material.dart';

void main() {
  runApp(
    const Center(
      child: Text(
        'Hello World!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

코드를 간략하게 설명하자면, 최상단의 material.dart를 포함한 이유는 Flutter의 레이아웃을 설계하는데 material에서 제공하는 많은 UI 컴포넌트들을 갖다 써야하기 때문입니다. 그 밑에 main()함수는 아무것도 반환하지 않는 void함수로 프로젝트가 실행되면 가정 먼저 실행되는 특별한 함수입니다. main()함수에 들어가면 바로 나오는 코드가 runApp()함수인데 인자안의 함수를 실행하는 일을 합니다.

runApp()함수의 인자로 Center()함수가 들어갔는데 이는 화면에 보이는 것들을 가운데로 정렬하는 레이어입니다. 그 앞에 붙은 const는 상수라는 말뜻 그대로 이하 내용들을 한번 만들면 변경하지 않고 프로그램이 종료될때까지 고정적으로 가져가겠다는 의미입니다.

Center()안에 들어갈 컴포넌트는 child라는 키에 값으로 넣는데요. Text()함수가 가운데 정렬을 제공하는 레이어 안에 들어가 있네요. Text()함수는 문자열을 화면에 보여주는 기능을 합니다. 첫번째 인자로 문자열, ‘Hello World!’를 입력하고 두번째 인자 textDirection의 값으로 들어간 TextDirection.ltr은 Left to Right의 줄임말로 글씨를 왼쪽에서 오른쪽으로 가는 순서대로 출력하라는 의미입니다. 히브리어는 영어와 다르게 문자를 읽는 순서가 다르기 때문에 이걸 명시 하도록 해 놓은 것인데요. 아마도 이걸 개발한 개발자가 유태인이 아닌가 싶습니다. 앞으로 배우게 될 MaterialApp()함수를 사용해서 레이아웃을 시작하면 기본 값이 세팅 되기 때문에 이걸 매번 써 주지 않아도 됩니다. 하지만 지금은 아주 기초적인 문법으로 코딩을 하고 있기 때문에 textDirection의 값을 명시 해야만 에러없이 앱이 실행 됩니다.

앱을 실행하기 위해서 우선 지난 시간에 배웠던 대로 애뮬레이터를 실행합니다. Android Studio 상단메뉴에서 실행된 애뮬레이터를 선택하고 main.dart를 선택한뒤 우측의 초록색 ▶버튼을 눌러서 앱을 실행합니다.

실행결과는 왼쪽의 이미지와 같습니다.

모두들 여기까지 문제없이 오셨기를 기대하면서 다음시간에는 MaterialApp()를 이용하여 Hello World를 구현해보는 시간을 갖도록 하겠습니다. 감사합니다.

References: