0%

[Flutter] 모바일 앱 개발 : Flutter 시작하기 #5 - First Flutter App (4)

안녕하세요. @anpigon 입니다.

이전 글 "모바일 앱 개발 : Flutter 시작하기 #4"에서 이어집니다. Flutter 튜토리얼 파트2의 6 ~ 7 까지의 내용입니다. 이번에는 새로운 페이지로 이동하는 방법과 테마를 변경하는 방법을 학습합니다.

Screenshot 2.png


이번에 완성된 앱의 동작 화면입니다.

Oct212018 201023.gif




페이지 이동하기 (Navigate to a new screen)

이번에는 홈 라우트(route)에서 새로운 라우트(route)로 이동하는 방법을 학습하고, 즐겨찾기에 저장된 단어를 확인할 수 있는 새 페이지(플러터 라우트)를 구현해보자.

플러터에서는 네비게이터의 스택으로 앱 라우트(route)를 관리한다. 네비게이터 스택으로 라우트(route)를 푸시(push)하면 해당 라우트로 화면이 업데이트된다. 그리고 네비게이터 스택에서 라우트를 팝(pop)하면 화면이 이전 라우트로 돌아간다.

RandomWordsState 클래스의 build 메서드를 수정하여 AppBar에 목록 아이콘을 추가해보자. 그리고 그 목록 아이콘을 누르면 즐겨찾기에 저장된 단어를 볼 수 있는 페이지로 이동하도록 구현한다.

아래와 같이 build() 메소드를 수정한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class RandomWordsState extends State<RandomWords> {
...
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Startup Name Generator'),
actions: <Widget>[ // 여기서 부터 추가 ...
new IconButton(
icon: const Icon(Icons.list),
onPressed: _pushSaved
),
], // ... 여기까지
),
body: _buildSuggestions(),
);

...

일부 위젯 속성의 하위 항목(child)은 단일 위젯을 사용한다. 그리고 actions와 같은 몇몇 속성은 하위 항목(children)으로 대괄호([])로 표시된 위젯 배열을 사용한다.


그다음 RandomWordsState 클래스에 _pushSaved() 함수를 추가하자.

1
2
void _pushSaved() {


앱을 새로고침하면 AppBar에 아이콘()이 나타난다. 하지만 아직 _pushSaved 함수를 구현하지 않아서 아이콘을 눌러도 작동은 하지 않는다.


그다음 새 라우트를 만들고 네비게이터 스택에 푸시(push)해보자. 이렇게 하면 새로운 라우트가 화면에 표시된다. 아래와 같이 Navigator.push 함수를 호출하면 네비게이터 스택에 라우트가 푸시된다.

1
2
3
4
void _pushSaved() {
Navigator.of(context).push(
);

여기까지 구현하면 안드로이드 스튜디오에서 경고 메시지가 나올 것이다. 지금은 이 메시지를 무시해도 된다.


새 페이지의 내용은 MaterialPageRoute의 builder 속성에 이름없는 함수로 작성할 것이다. MaterialPageRoute와 builder 속성을 구현하자. 일단 ListTile 목록을 생성하는 코드를 추가한다. 그리고 toList() 함수에 의해 변환된 최종 목록 데이터를 divided에 저장한다. 여기서 ListTile의 divideTiles() 함수는 각 ListTile 사이에 구분선을 추가하는 기능을 갖고 있다.

아래와 같이 코드를 추가한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
void _pushSaved() {
Navigator.of(context).push(
new MaterialPageRoute<void>( // 여기서 부터 추가...
builder: (BuildContext context) {
final Iterable<ListTile> tiles = _saved.map(
(WordPair pair) {
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
);
},
);
final List<Widget> divided = ListTile
.divideTiles(
context: context,
tiles: tiles,
)
.toList();
},
), // ... 여기까지
);


builder 속성에 "Saved Suggestions"라는 AppBar를 가진 Scaffold 위젯을 반환하도록 추가한다. 새 라우트의 본문(body)은 ListTiles 목록을 포함하는 ListView로 구성되고, 각 항목은 구분선으로 구분될 것이다.

아래와 같이 코드를 추가한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
void _pushSaved() {
Navigator.of(context).push(
new MaterialPageRoute<void>(
builder: (BuildContext context) {
final Iterable<ListTile> tiles = _saved.map(
(WordPair pair) {
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
);
},
);
final List<Widget> divided = ListTile
.divideTiles(
context: context,
tiles: tiles,
)
.toList();

return new Scaffold( // 여기서 부터 추가 ...
appBar: new AppBar(
title: const Text('Saved Suggestions'),
),
body: new ListView(children: divided),
); // ... 여기까지
},
),
);


앱을 새로 고침한다.

이제 일부 단어를 즐겨찾기에 저장하고 AppBar에 있는 목록 아이콘을 눌러보자. 그러면 즐겨찾기로 저장한 단어만 있는 새로운 페이지로 이동한다. “뒤로가기” 버튼은 네비게이터에 의해 AppBar에 자동으로 추가된다. 그래서 우리는 Navigator.pop을 구현할 필요가 없다. 홈으로 돌아가기 위해서는 뒤로가기 버튼을 누르면 된다.

Oct-21-2018 19-50-31.gif




테마 변경하기 (Change the UI using Themes)

이번에는 앱 테마를 수정해 보자. 테마는 앱의 모양과 느낌을 제어한다. 실제 디바이스 또는 에뮬레이터에 있는 기본 테마를 사용하거나 또는 여러분의 브랜딩을 반영한 테마로 커스터마이즈 할 수도 있다.

ThemeData 클래스를 사용하여 테마를 쉽게 변경할 수 있다 . 현재 기본 테마를 사용하고 있는 앱의 기본 색상을 흰색으로 바꿔보자.

아래와 같이 MyApp 클래스의 색상을 변경한다.

1
2
3
4
5
6
7
8
9
10
11
12
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Startup Name Generator',
theme: new ThemeData( // 여기서 부터 추가 ...
primaryColor: Colors.white,
), // ... 여기까지
home: new RandomWords(),
);



앱을 새로 고침하면, AppBar를 포함한 전체 배경이 흰색으로 바뀐다.

연습삼아 앱 UI를 다른 색상으로도 변경해보자. 머티리얼 라이브러리의 Colors 클래스는 많은 색상 상수를 제공한다. 그리고 핫 리로드(hot reload)는 UI를 쉽고 빠르게 테스트 할 수 있게 해준다.

스크린샷 2018-10-21 19.55.55.png


만약 앱이 제대로 작동하지 않는다면 lib/main.dart 코드를 참고하세요.

이것으로 구글 플러터 홈페이지에서 제공하는 “Write Your First Flutter App” 튜토리얼 강좌 1부와 2부를 모두 마쳤습니다.

저는 현재 튜토리얼만 경험해 보았습니다. 그리고 튜토리얼만으로 리액트 네이티브(React Native)와 플러터(Flutter)를 비교해보았을때, 개발환경 셋팅, 개발 속도, UI컴포넌트 부분에서는 플러터가 더 좋다고 생각됩니다. 앞으로 Flutter가 더 발전하여 React Native를 능가하는 모바일앱 개발 프레임워크가 되었으면 좋겠습니다.


여기까지 읽어주셔서 감사합니다.

이전 글


Sponsored ( Powered by dclick )
[백서툰] EOS 백서 만화로 이해하기 (2)

지난화에 이어 ‘EOS백서 만화로 이해하기’ 2편입니다. 백서 원문이 궁금하신 분들은 이곳을 …

logo

이 글은 스팀 기반 광고 플랫폼
dclick 에 의해 작성 되었습니다.


Originally posted on http://steemit.com