[Flutter] 1. 플러터로 만드는 첫 번째 앱 (1) - 플러터 앱의 구조와 외부 라이브러리 사용

* 이 포스팅은 기본적으로 플러터 공식 문서 https://flutter.dev/docs 를 번역하여 작성하고 있습니다.

* 추가로 오준석의 플러터 생존코딩 및 제 개인 경험을 참고하여 작성하고 있습니다.

* 플러터를 원문 공식 문서를 읽으면서 공부하는 과정에서 정리하고자 작성하는 포스팅으로

저는 플러터 실무 개발 경력이 없는 대학생인 점을 미리 밝힙니다.

* 오역, 오탈자, 잘못된 내용의 지적은 항상 감사히 받겠습니다 :)

 

본 포스팅은

https://flutter.dev/docs/get-started/test-drive

https://flutter.dev/docs/get-started/codelab

Write your first Flutter app, part 1

이 두 문서의 내용을 기반으로 작성하였습니다.

---

안드로이드 스튜디오를 실행시킵니다.

 

 

Create New Flutter Project 를 선택합니다.

이 메뉴가 없다면, Android Studio에 Flutter 플러그인을 설치하지 않은 것이니

이전 포스팅을 참고해주세요.

 

 

이대로 두고 Next를 누릅니다.

 

 

프로젝트 이름으로 my_app을 입력합니다.

Flutter SDK path는 이전 포스팅에서 플러터 SDK의 압축을 해제했던 flutter 경로를 넣어줍니다.

 

 

Next 를 눌러줍니다.

 

 

패키지명을 입력하는 공간입니다.

플레이스토어에 등록되는 어플리케이션의 고유 이름으로, 유일한 값이어야 합니다.

플러터에서는 도메인이 거꾸로 나옵니다. example.com => com.example 이런 식입니다.

이 앱은 플레이스토어에 올리지는 않으니 이대로 두고 Finish를 누릅니다.

 

 

이런 창이 나오면 정상입니다.

 

 

상단에 이런 메뉴들이 있습니다.

맨 좌측에 있는 것은, 이 앱을 실행할 기기입니다.

핸드폰을 USB로 연결하면, 이렇게 앱을 실행해볼 핸드폰을 지정할 수 있습니다.

또한 플러터는 웹에서도 실행결과를 볼 수 있습니다.

 

 

하단 목록을 펼쳐보면, 핸드폰 뿐만 아니라 마이크로소프트의 Edge와 구글 Chorme으로도

이 앱을 실행해 볼 수 있음을 알 수 있습니다.

 

저는 모바일로 두고 실행을 해보겠습니다.

첫 실행에는 시간이 조금 걸리는 편이니, 기다리다보면 핸드폰에 앱의 실행결과가 나옵니다.

 

 

제 핸드폰 갤럭시 노트9에서 실행시킨 모습입니다.

우측 하단의 + 버튼을 누르면 숫자가 증가합니다.

원하는 만큼 터치해서 숫자를 증가시켜 줍니다.

 

그리고 안드로이드 스튜디오로 돌아와서 코드를 조금 수정해보겠습니다.

수정할 부분은 97번째 줄입니다.

 

 

이 녹색으로 표시된 문자열 내부를 수정합니다.

공식 문서에서는 pushed 를 clicked 로 수정하라고 하네요.

원하는 문자열로 수정해줍니다.

 

그리고 핸드폰 앱이 켜진 상태로,

안드로이드 스튜디오에서 Cntr + S 를 눌러 변경사항을 저장합니다.

 

 

저는 공식문서에 나온대로 clicked로 수정했습니다.

아까 증가시켰던 숫자 카운트가 유지된 채로, 변경 사항이 적용됨을 볼 수 있습니다.

이것이 플러터의 핫 리로드 (hot reload) 기능입니다.

수정 내용을 즉시 반영해서 앱을 처음부터 다시 빌드하지 않고도 변경 내용을 볼 수 있습니다.

 

개인적으로 java로 안드로이드 공부할 때 매번 빌드하는게 불편했는데

(매번 빌드할 때마다 시간이 오래 걸리는 것은 덤..)

확실히 플러터가 이런 점은 편한 것 같습니다.

---

이제 코드 내용을 모두 지우고 다음 코드 내용을 넣습니다.

// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/material.dart';

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

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

 

구글 플러터 팀에서 작성한 플러터 공식문서에 존재하는 코드입니다.

(https://flutter.dev/docs/get-started/codelab)

 

공식 문서에서는 코드를 복사 붙여넣기 하는 도중 들여쓰기가 깨졌을 때의 대처법도 소개하고 있습니다.

안드로이드 스튜디오 기준 Ctrl+Alt+L 키를 누르면 알아서 들여쓰기를 정리해줍니다.

 

코드 에디터 창에서 마우스 우클릭을 누르고

Reformat Code with dartfmt 을 눌러도 됩니다.

 

이제 다시 붙여넣은 코드를 저장합니다.

 

 

이렇게 앱이 바뀝니다.

예제 코드를 관찰해보면서 플러터의 앱 구조를 보겠습니다.

 

1. 1. 이 예제는 Meterial 디자인의 앱을 만드는 예제입니다.
   저는 Meterial을 편하게 '안드로이드 느낌 디자인' 정도로 이해했습니다.
   플러터는 Meterial 디자인으로 여러 위젯과 아이콘을 기본 제공합니다.
   비슷하게, 'IOS' 느낌의 디자인을 제공하는 쿠퍼티노 디자인도 있습니다.
   
   
2. 다트언어 역시 프로그램의 실행 시작점은 메인함수 입니다.
   void main() => runApp(MyApp()); 에서 '=>' 는 다트 언어 문법으로, 한 줄로된 함수/메서드를 이렇게 표현합니다.
   물론 void main() { runApp(MyApp()); } 이렇게 표현하는 것도 가능하며, 같은 의미입니다.
   
   
3. MyApp 클래스는 StatelessWidget을 상속받는 '위젯' 입니다. 플러터에서는 앱의 시작점부터도 '위젯' 단위로 되어 있으며, 레이아웃, 뷰 등이 모두 '위젯'으로 되어있습니다.
   이런 '위젯'들은 공통적으로 build() 메소드를 가지는데, 이 메소드는 자신의 '하위 위젯'을 어떻게 표현할 지 결정합니다. 그래서 플러터에서는 대체로 이 build() 메소드를 구현하는데 집중하게 됩니다
4. MyApp()의 build() 메소드는 MeterialApp() 위젯을 반환합니다. 이 위젯으로 앱의 기반을 만들겠다는 의미입니다.
   이 위젯의 생성자의 home 인자에 처음 실행할 위젯으로 Scaffold() 위젯을 넘겨주고 있습니다.
   이 Scaffold() 위젯은 홈 위젯 트리를 구성하는 기본 요소인 appbar, body, title, bottomNavigationBar 등을 제공합니다.
   
   
5. 이 Scaffold() 위젯의 내부에 appBar 인자에 AppBar() 위젯을 주고 있고, body 인자에는 Center() 위젯을 넘겨주고 있습니다. 그리고 Center 위젯은 Text() 위젯을 그 안에 갖고 있습니다.

Center위젯은 일종의 레이아웃 역할을 합니다.

내부 위젯을 자신이 차지한 영역의 가운데에 배치합니다.

Text() 위젯은 말 그대로, 문자열을 표시하는 위젯입니다.

AppBar() 위젯은 앱 상단의 파란색 바를 나타내는 위젯입니다.

---

이것이 플러터의 기본 앱구조 입니다.

 

main 함수에서 runApp()을 실행하여, 인자로 들어온 위젯을 앱으로 실행시킨다.

이때 인자로는 MeterialApp() 위젯을 넘기는데,

이 위젯은 title, home 속성을 가진다.

 

home에는 앱 실행시 맨 처음 실행될 위젯이 배치된다.

여기에 Meterial 디자인으로서 Scaffold() 위젯을 넘겨 실행한다.

이 위젯은 우리가 흔히 보는 안드로이드 앱의 기본 디자인을 표현할 수 있는 위젯이다.

이 위젯의 body 부분에 사용자가 사용하는 앱 영역을 구현하면 된다.

 

공식문서를 읽으면서 저는 이렇게 이해했습니다.

---

이제 이 기본 예제를 이용해서 '이름을 생성하는 앱'을 만들어 보겠습니다.

이때 '이름을 생성하는 기능'은 직접 구현하지 않고

외부 라이브러리를 가져다가 사용하려고 합니다.

 

이런 외부 소스들은

https://pub.dev/

Dart packages

이 사이트에서 찾을 수 있습니다.

 

우리가 사용할 것은 english_words 소스입니다.

위 사이트로 가서 english_words를 검색합니다.

 

 

이 소스가 나옵니다.

이 소스를 사용하기 위해

 

Installing 탭으로 갑니다.

그러면 이 라이브러리를 설치하는 방법을 볼 수 있습니다.

 

우리는 flutter를 쓰고 있으니 with Flutter 에 적혀있는 명령어를 이용합니다.

안드로이드 스튜디오 하단에 있는 터미널을 이용하겠습니다.

 

 

하단에서 Terminal 탭을 선택합니다.

 

 

아까 cmd에서 봤던 것과 비슷한 터미널창이 열립니다.

여기에 아까 봤던 명령어를 입력합니다.

 

 

설치가 완료되었습니다.

이제 좌측에서 프로젝트 트리를 보면

 

이렇게 여러 파일들이 있는데, pubspec.yaml 에 아까 설치했던 라이브러리가 등록되어

dart 소스에서 해당 라이브러리를 import해 사용할 수 있게 되었습니다.

 

아까 설치한 english_words 라이브러리가 등록되어 있다.

구글 문서에서는 별도로 저 문장을 추가하라고 나와있지만,

굳이 직접 추가할 필요는 없었네요.

 

 

등록한 모듈을 사용하기 위해, pubspec.yaml 파일을 열고, 우측 상단에서 Pub get 을 클릭합니다.

 

 

이제 모듈을 import해서 사용해보겠습니다.

 

 

아래 코드를 추가합니다.

 

import 'package:english_words/english_words.dart';

 

그러면 이제 이 모듈의 기능을 사용할 수 있게 됩니다.

포스팅이 꽤 많이 길어져 이후 내용은 끊어서 다음 글에 이어서 포스팅하겠습니다.