스타트업 회사를 위해 이름을 생성하여 제안하는 간단한 모바일 앱을 구현할 것입니다. 사용자는 이름을 선택하거나 선택을 취소할 수 있으며, 가장 좋은 이름을 저장할 수 있습니다. 코드는 lazy하게 이름을 생성합니다. 사용자가 스크롤하면 더 많은 이름이 생성됩니다. 무한하게 스크롤 할 수 있습니다.
GIF 애니메이션은 1부를 완료하면 앱이 어떻게 동작하는지를 보여줍니다.
1부에서 무엇을 배우는가
iOS와 Android 그리고 웹에서 자연스럽게 보이는 Flutter 앱을 작성하는 방법.
Flutter 앱의 기본 구조.
패키지를 찾고 패키지를 사용하여 기능을 확장하기.
더 빠른 개발 사이클을 위한 hot reload 사용.
Stateful 위젯을 구현하는 방법.
Lazy하게 로드하는 무한 리스트를 만드는 방법.
코드랩2부에서는 상호작용을 추가하고, 앱 테마를 수정하며, 새 화면으로 이동하는 기능 (Flutter에서route라고 불립니다)을 추가합니다.
무엇을 사용하는가
이 코드랩을 완료하기 위해Flutter SDK와에디터가 필요합니다. 이 코드랩은 안드로이드 스튜디오를 기반으로 되어있지만, 원한다면 에디터를 이용할 수도 있습니다.
lib/main.dart의 내용을 바꿉니다. lib/main.dart의 모든 코드를 삭제합니다. 화면 중앙에 “Hello World”를 표시하는 아래 코드로 대체합니다.Tip:코드를 앱에 붙여 넣을 때 들여쓰기가 깨질 수 있습니다. Flutter 도구를 활용하여 자동으로 문제를 해결할 수 있습니다.
안드로이드 스튜디오 / IntelliJ IDEA: 코드에서 오른쪽 버튼을 클릭한 후Reformat Code with dartfmt를 선택하세요.
VS Code: 오른쪽 버튼을 클릭한 후Format Document를 선택하세요.
터미널:flutter format <파일명>을 실행하세요.
lib/main.dart
content_copy
// 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'),
),
),
);
}
}
IDE에 적합한 방식으로앱을 실행하세요. 장치에 따라, Android 또는 iOS 결과가 나와야 합니다.
iOS
Tip:실제 기기에서 처음 실행할 때는, 로딩에 시간이 걸릴 수 있습니다. 이후, 빠른 업데이트를 위해 hot reload를 사용할 수 있습니다. 앱이 실행 중일 때저장을 하면 hot reload를 수행합니다.
안드로이드
관찰
이 예제는 머티리얼 앱을 만듭니다.머티리얼은 모바일 및 웹에서 표준으로 사용되는 시각 디자인 언어입니다. Flutter는 다양한 머티리얼 위젯을 제공합니다.
main()메서드는 화살표(=>) 표기법을 사용합니다. 한 줄 함수 또는 메서드에 화살표 표기법을 사용하세요.
앱은StatelessWidget을 상속받아 앱 자체를 위젯으로 만듭니다. Flutter에서는 정렬, 여백, 레이아웃 등 거의 모든것이 위젯입니다.
머티리얼 라이브러리의Scaffold위젯은 홈 스크린의 위젯 트리를 구성하는 app bar, title, body 속성을 기본으로 제공합니다. 위젯 하위 트리는 상당히 복잡할 수 있습니다.
위젯의 주된 임무는 다른 하위 위젯을 어떻게 표현할 지를 설명하는build()메서드를 제공하는 것입니다.
이 예제는 자식 위젯으로Text을 포함하는Center위젯으로 구성됩니다. Center 위젯은 하위 위젯을 화면 중앙에 정렬합니다.
2단계: 외부 패키지 이용하기
이 단계에서는 가장 많이 사용되는 영어 단어 수천 개와 몇 가지 유틸리티 기능이 포함되어 있는 오픈 소스 패키지인english_words를 이용할 것입니다.
다른 오픈 소스 패키지와 마찬가지로, [the Package site][]에서english_words패키지를 찾을 수 있습니다.
안드로이드 스튜디오의 편집기 화면에서 pubspec 파일을 보는 동안 나타나는Packages get를 클릭하세요. 이렇게 하면 해당 패키지를 프로젝트로 가져옵니다. 아래와 같은 메시지를 콘솔에서 확인할 수 있습니다:또한Packages get을 수행하면pubspec.lock프로젝트로 가져온 모든 패키지 목록과 버전 번호를 포함하고 있는pubspec.lock파일도 자동으로 생성됩니다.
content_copy
$ flutter pub get
Running "flutter pub get" in startup_namer...
Process finished with exit code 0
lib/main.dart에서 새 패키지를 가져오세요:입력 할 때, 안드로이드 스튜디오가 import 할만한 라이브러리를 추천해줍니다. 그런 다음 import 문자열이 회색으로 나타내어 해당 라이브러리가 (지금까지는) 사용되지 않았음을 알려줍니다.
“Hello World” 문자열 대신 English words를 사용하여 텍스트를 생성하세요:참고:“Pascal case” (“upper camel case”라고도 알려져있음)는 문자열에서 맨 처음 단어를 포함한 모든 단어의 첫번째 글자가 대문자로 시작하는 형식입니다. 그래서, “uppercamelcase”는 “UpperCamelCase”가 됩니다.
{step1_base → step2_use_package}/lib/main.dart
@@ -9,6 +10,7 @@
9
10
class MyApp extends StatelessWidget{
10
11
@override
11
12
Widget build(BuildContext context) {
13
+ final wordPair = WordPair.random();
12
14
return MaterialApp(
13
15
title: 'Welcome to Flutter',
14
16
home: Scaffold(
@@ -16,7 +18,7 @@
16
18
title: Text('Welcome to Flutter'),
17
19
),
18
20
body: Center(
19
- child: Text('Hello World'),
21
+ child: Text(wordPair.asPascalCase),
20
22
),
21
23
),
22
24
);
앱이 실행중이면,hot reload를 사용하여 실행중인 앱을 업데이트하세요. 실행중인 앱에서 hot reload를 클릭할 때마다 혹은 프로젝트를 저장할 때마다, 랜덤하게 선택된 다른 단어 쌍을 볼 수 있을 것입니다. 왜냐하면 MaterialApp이 렌더링 될 때마다 혹은 또는 Flutter Inspector에서 플랫폼을 전환할 때마다 실행되는 build 메서드 안에서 단어 쌍을 생성하고 있기 때문입니다.
iOS
안드로이드
문제가 있나요?
앱이 올바르게 동작하지 않는다면, 오타를 확인해보세요. Flutter 디버깅 툴을 사용해보고 싶다면,DevTools제품군과 프로파일링 툴을 확인해보세요. 필요하다면, 아래 코드를 사용하여 다시 올바르게 동작하게 하세요.
Stateless위젯은 변경불가능immutable합니다. 속성을 변경할 수 없습니다—모든 값이 final입니다.
Stateful위젯은 위젯의 수명동안 변경될 수 있는 상태를 유지합니다. Stateful 위젯은 최소 두 개 이상 클래스가 필요합니다: 1) StatefulWidget 클래스가 2) State 클래스 의 인스턴스를 생성합니다. StatefulWidget 클래스 그자체는 변경불가능합니다. 하지만 State 클래스가 위젯의 수명동안 상태를 유지합니다.
이 단계에서는, Stateful 위젯RandomWords를 추가하고, 그 위젯에서State클래스인RandomWordsState를 생성할 것입니다. 그런 다음RandomWords를 기존 Stateless 위젯MyApp의 자식으로 사용할 것입니다.
최소한의 상태를 가지는 클래스를 생성하세요.main.dart의 하단에 아래 코드를 추가하세요:State<RandomWords>선언을 눈여겨보세요.RandomWords로 지정된 제네릭으로State클래스를 사용하고 있습니다. 대부분의 앱 로직과 상태는 여기서 유지됩니다—RandomWords위젯을 위해 상태를 보관합니다. 이 클래스에 생성된 단어 쌍이 저장됩니다. 사용자가 스크롤함에 따라 단어 쌍이 무한히 증가하고, 사용자가 하트 아이콘 스위치를 눌러 가장 좋아하는 단어 쌍을 지정할 수 있습니다(part 2에서).
RandomWordsState는RandomWords클래스에 의존적입니다. 아래에서 추가할 것입니다.
lib/main.dart (RandomWordsState)
content_copy
class RandomWordsState extends State<RandomWords> {
// TODO Add build() method
}
Stateful 위젯RandomWords를main.dart에 추가하세요.RandomWords위젯은 상태 클래스를 만드는 것 이외에 별다른 일을 하지 않습니다:상태 클래스를 추가한 후, IDE가 클래스에 build 메서드가 없다고 경고합니다. 다음으로, 기본 메서드 build를 추가하고 단어 생성 코드를MyApp에서RandomWordsState로 옮겨 단어 쌍을 생성하도록 하세요.
앱을 재시작하세요. 앱은 이전에 동작하던 방식과 마찬가지로 hot reload 하거나 저장할 때마다 단어 쌍을 계속 보여줘야 합니다.
Tip:Hot reload 할 때 아래와 같은 경고문구가 나온다면, 앱을 재시작하는 게 좋습니다.
Reloading… Some program elements were changed during reload but did not run when the view was reassembled; you might need to restart the app (by pressing “R”) for the changes to have an effect.
메시지가 잘못 표시된 것일 수 있지만, 재시작하면 변경 사항이 확실하게 앱 UI에 반영됩니다.
문제가 있나요?
앱이 올바르게 동작하지 않는다면, 오타를 확인해보세요. Flutter 디버깅 툴을 사용해보고 싶다면,DevTools제품군과 프로파일링 툴을 확인해보세요. 필요하다면, 아래 코드를 사용하여 다시 올바르게 동작하게 하세요.
이 단계에서는,RandomWordsState를 확장하여 단어 쌍 목록을 생성하고 표시합니다.ListView위젯 안에 표시되는 목록이 사용자가 스크롤할 때마다 무한하게 늘어납니다.ListView의builder팩토리 생성자를 사용하면 필요에 따라 lazy한 방식으로 목록을 만듭니다.
제안된 단어 쌍을 저장하기 위해RandomWordsState클래스에_suggestions목록을 추가하세요. 또한, 글자 크기를 키우기 위해_biggerFont변수를 추가하세요.참고:Dart 언어에서는 식별자 앞에 밑줄을 붙이면프라이빗 적용이 됩니다.ListView클래스는 builder 속성인itemBuilder를 제공합니다. 이 팩토리 빌더는 익명 함수 형태의 콜백 함수를 받습니다. 두 인자가 함수에 전달됩니다;BuildContext와 행 반복자i입니다. 반복자는 0부터 시작되고 함수가 호출될 때마다 증가합니다. ListTile에 제안된 모든 단어 쌍에 대해 2번씩, 그리고 Divider에 1번씩 증가합니다. 이 방식을 사용하여 사용자가 스크롤을 할 때마다 목록이 무한하게 증가할 수 있게 할 수 있습니다.
다음으로,RandomWordsState클래스에_buildSuggestions()함수를 추가하세요. 이 메서드는 제안된 단어 쌍을 표시하는ListView를 만듭니다.
lib/main.dart
content_copy
class RandomWordsState extends State<RandomWords> {
final _suggestions = <WordPair>[];
final _biggerFont = const TextStyle(fontSize: 18.0);
// ···
}
RandomWordsState클래스에_buildSuggestions()함수를 추가하세요:
itemBuilder콜백은 단어 쌍이 제안될 때마다 호출되고 각각을ListTile행에 배치합니다. 짝수 행인 경우ListTile행에 단어 쌍을 추가합니다. 홀수 행인 경우 시각적으로 각 항목을 구분하는Divider위젯을 추가합니다. 작은 기기에서는 구분선을 보기 어려울 수 있습니다.
ListView의 각 행 앞에 1 픽셀 높이의 구분선 위젯을 추가하십시오.
i ~/ 2표현식은i를 2로 나눈 뒤 정수 결과를 반환합니다. 예를 들어: 1, 2, 3, 4, 5는 0, 1, 1, 2, 2가 됩니다. 이렇게 하면 구분선 위젯을 제외한ListView에 있는 단어 쌍 수가 계산됩니다.
가능한 단어 쌍을 모두 사용하고 나면, 10개를 더 생성하고 제안 목록에 추가합니다.
_buildSuggestions()함수는 단어 쌍 마다 한 번 씩_buildRow()를 호출합니다. 이 함수는ListTile에서 각각 새로운 쌍을 표시하여 다음 단계에서 행을 더 매력적으로 만들 수 있게 합니다.
lib/main.dart (_buildSuggestions)
content_copy
Widget _buildSuggestions() {
return ListView.builder(
padding: const EdgeInsets.all(16.0),
itemBuilder: /*1*/ (context, i) {
if (i.isOdd) return Divider(); /*2*/
final index = i ~/ 2; /*3*/
if (index >= _suggestions.length) {
_suggestions.addAll(generateWordPairs().take(10)); /*4*/
}
return _buildRow(_suggestions[index]);
});
}
RandomWordsState클래스에서build()메서드를 변경하여 단어 생성 라이브러리를 직접 호출하지 말고_buildSuggestions()을 사용하도록 하세요, (Scaffold는 기본적인 머티리얼 디자인 시각 레이아웃을 구현합니다.) 메서드의 본문을 아래 강조 표시된 코드로 교체하세요:
댓글 영역