Flutter

Flutter 튜토리얼 시작하기 - 3.1

일태우 2019. 9. 26. 21:46

이번 포스트에서는 간단하게 스타트업의 이름을 생성하여 제공하는 app을 만들어 보자. 진행에 관련된 모든 소스는 Github에서 확인 할 수 있다!

 

사용자는 이름을 선택하거나 해제할 수 있고, 가장 좋은 이름 하나를 저장할 수 있게 기능을 구현해볼 것이다. 화면은 리스트로 구성하여 스크롤을 내릴 때 이름을 생성하게 하고, 스크롤은 제한이 없게 끔 해보도록 하자.

 

아래의 샘플 이미지를 보면 우리가 만들게 될 app이 어떤 모습일지 알 수 있다.

출처: Flutter.dev

우리가 이번 포스트로 배울 수 있는 것?

  • Android, IOS나 web에서 자연스럽게 보이는 Flutter app를 만드는 법!

  • Flutter app의 기본 구조

  • 기능 확장을 위해 패키지를 찾거나 사용하는 방법

  • 빠른 개발 사이클을 위한 Hot reload 사용법

  • stateful 위젯을 구현하는 방법.

  • 무한하고 느리게 로드되는 리스트를 만드는 방법

 

1단계 : 스타터 Flutter app 만들기

저번 Flutter 튜토리얼 시작하기 - 2 포스트의 데모 Flutter app 생성을 참고하여 startup_namer라는 이름으로 프로젝트를 생성해보자. (만약 Start a new Flutter project 버튼이 안 보인다면 바로 위쪽의 Flutter와 Dart 플러그인 설치를 다시 따라 해 보자)

 

일단 lib/main.dart의 모든 소스코드를 지우고 아래의 코드로 lib/main.dart 내용을 교체하자 해당 코드는 화면 중앙에 "Hello World"를 띄우는 소스코드다.

// 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: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

 

소스코드를 붙여 넣을 때 들여 쓰기가 틀어지는 경우가 있을 수 있다. 이런 문제는 다음과 같은 방법을 이용해 자동으로 수정할 수 있다.

Android Studio / IntelliJ IDEA : 소스코드에 우클릭을 하고 Reformat Code with dartfmt를 클릭한다.
VS-Code : 소스코드에 우클릭하고 Format Document를 클릭한다.
Terminal(CMD, Power Shell 등) : flutter format <filename> 명령어를 실행한다.

 

소스코드의 교체를 완료하였으면 실행해보자. AVD에 다음과 같은 화면이 나타날 것이다.

Android 실행 결과

결과 확인

  • 이 예제는 Material app을 생성한다. Material은 시각언어(visual design language)라고 하는데 웹과 모바일의 표준 디자인으로 쓰이고 있다. (참고 : Material Introduction)

  • main() 메서드는 (=>) 표현법을 사용한다. 간단히 설명하자면 => runApp(..) 코드는 { return runApp(..); } 구문을 짧게 쓰는 방법이다. (참고 : Dart docs)

  • 이 app은 StatelessWidget을 상속하여 app 자체를 위젯으로 만드는데, Flutter에서는 alignment, padding 그리고 layout을 포함하여 거의 모든 것이 위젯이다.

  • Material 라이브러리의 Scafflold 위젯 내부에 appBar와 body를 추가하는 방식으로 쉽게 Material 디자인 app을 만들 수 있다. body는 화면에 뿌릴 위젯 트리를 포함하고 있다.

  • 위젯의 기본 동작은 build() 메서드를 호출하는 건데 이 메서드는 위젯을 어디에 위치하게 할지 정한다.

  • 이 예제의 bodytext 하위 위젯을 포함하는 Center 위젯으로 구성된다. Center 위젯은 자신의 위젯 서브 트리(예제에서는 서브 트리에 text 위젯뿐이다)를 화면의 중앙에 정렬한다.

 

2단계 : 외부 패키지 사용하기

이번 단계에서는 english_words라는 오픈 소스 패키지를 사용해보자, 이 오픈 소스는 가장 많이 사용되는 몇 천 개의 영단어와 함께 몇 개의 유틸 함수들을 제공한다.

english_words 오픈 소스 패키지는 다른 오픈 소스 패키지들과 마찬가지로 Pub site에서 찾을 수 있다.

 

Flutter packages

Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter, AngularDart, and general Dart programs.

pub.dev

  1. pubspec파일은 Flutter app의 자산 및 종속성을 관리한다. pubspec.yaml 파일을 열고 dependencies 블록에 english_words(3.1.0 또는 그 이상 버전)를 추가하자
    dependencies:
      flutter:
        sdk: flutter
    
      # The following adds the Cupertino Icons font to your application.
      # Use with the CupertinoIcons class for iOS style icons.
      cupertino_icons: ^0.1.2
      english_words: ^3.1.0
  2. 그 상태에서 저장 후 상단의 Packages get 버튼을 누르면 패키지를 프로젝트에 내려받게 된다. 콘솔을 보면 다음과 같은 결과를 확인할 수 있다.

    Packages get 동작 시 pubspec.lock 파일이 만들어지고, 프로젝트에 받아진 모든 패키지 목록과 버전이 pubspec.lock에 작성된다.

  3. lib/main.dart에 다음과 같이 패키지를 import한다.
    import 'package:flutter/material.dart';
    import 'package:english_words/english_words.dart';
    입력을 할 때 Android Studio가 라이브러리들을 import 하기 쉽게 보여준다. import 구문 작성을 완료하면 회색으로 변하는 걸 볼 수 있는데 현재까지 추가한 라이브러리가 사용되지 않았음을 알려주는 것이다
  4. "Hello World" 문자열 대신에 English words패키지를 사용하여 문자열을 생성해보자
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        final wordPair = WordPair.random();
        return MaterialApp(
          title: 'Welcome to Flutter',
          home: Scaffold(
            appBar: AppBar(
              title: Text('Welcome to Flutter'),
            ),
            body: Center(
              child: Text(wordPair.asPascalCase),
            ),
          ),
        );
      }
    }
    위에서 사용한 Pascal caseupper camel case라고도 불리는데 각 단어의 첫 문자를 대문자로 표기하는 표기법이다.
  5. app이 실행 중 일 때 수정을 했으면 hot reload 업데이트가 됐을 것이다. hot reload 버튼이나 프로젝트를 저장할 때마다 가운데 문자열이 바뀌는 걸 볼 수 있는데 이것은 MeterialApp이 렌더링을 요구할 때 build 메서드 내에서 단어 쌍(word pair)이 생성되기 때문이다.
    English words로 생성한 문자열!

     

문제가 생겼다면?

app이 작동이 안 된다면 오타가 있는지 확인을 해보고 다음의 파일이 알맞게 작성됐는지 확인해 보자

  • pubspec.yaml
    name: startup_namer
    description: startup_namer
    version: 1.0.0+1
    
    environment:
      sdk: ">=2.1.0 <3.0.0"
    
    dependencies:
      flutter:
        sdk: flutter
      cupertino_icons: ^0.1.2
      english_words: ^3.1.0
    
    dev_dependencies:
      flutter_test:
        sdk: flutter
    
    flutter:
      uses-material-design: true
  • lib/main.dart
    // 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';
    import 'package:english_words/english_words.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        final wordPair = WordPair.random();
        return MaterialApp(
          title: 'Welcome to Flutter',
          home: Scaffold(
            appBar: AppBar(
              title: Text('Welcome to Flutter'),
            ),
            body: Center(
              child: Text(wordPair.asPascalCase),
            ),
          ),
        );
      }
    }

포스트가 길어져서 여기서는 2단계까지만 다루도록 하겠다. 다음 포스트에서는 이어서 3단계부터 마무리까지 진행하고 결과를 확인해보자!