<div id="readability-page-1" class="page"><div>1편에서 이어서 2편은 프로젝트를 진행 과정을 소개하고 후기를 마무리 하겠습니다.<ol><li>Widget</li></ol>Flutter에서 대부분의 UI들은 Widget Class에 속해 있습니다.
예를 들어, <a href="https://api.flutter.dev/flutter/material/AlertDialog-class.html">AlertDialog</a> 문서를 보면 AlertDialog가 어디에 속해있는지 확인 할 수 있습니다.<ol start="2"><li>StatelessWidget &amp; StatefulWidget</li></ol>React를 사용해보신 개발자 분들에게는 친숙한 개념일 수도 있습니다. Flutter의 모든 UI 즉 Widget은 상태(state)를 가집니다.Widget이 StatelessWidget을 상속 할 때는 상태가 변하지 않아도 되는 UI로 그려집니다.Widget이 StatefullWidget을 상속 할 때는 상태가 변하는 UI로 그려집니다. Flutter에서 제공하는 <code>setState</code>&nbsp;함수를 통해서 widget의 상태를 변화 시킬 수 있습니다. (최근에 알게 되었는데 setState 말고도 widget의 상태를 관리해주는 방법들이 제공된다고 합니다. 특히 <a href="https://github.com/google/flutter-provide">provider</a>라는 프레임워크가 2019 Google I/O에서 언급이 되었는데, 굉장히 잘 만들었으니 꼭 사용하라고 언급 되었습니다.)이전에 react 개발 경험이 있어 state가 낯설지 않았습니다. react 개발을 했을 때 또 느꼈지만, ui의 state를 관리해줄 수 있다는 점은 굉장히 좋은 방법인거 같습니다.<h2 id="-save-data">🗄 Save Data</h2>앱을 간단하게 하기 위해서 데이터 저장은 sqlite를 이용해서 디바이스 내부에 저장히기로 결정했습니다. Flutter에서 sqlite를 이용하는 방법을 찾아보니, package를 이용하는게 제일 편리하다고 판단하여, <a href="https://github.com/tekartik/sqflite">sqflite</a>라는 package를 추가 했습니다.flutter가 입에 오르기 시작한지 얼마되지 않은 만큼, package들도 생겨나기 시작한지 얼마 안된 거 같습니다. star 갯수나 doc의 완성도가 좀 떨어지는 느낌을 받았지만 package 덕분에 쉽게 sqlite를 사용 할 수 있었습니다.<div><pre><code data-lang="dart"> import 'package:path/path.dart';
 import 'package:path_provider/path_provider.dart';
 import 'package:sqflite/sqflite.dart';

 ...

 initDB() async {
 ...

 return await openDatabase(path, version: 1, onOpen: (db) {
 }, onCreate: (Database db, int version) async {
 await db.execute("CREATE TABLE Line ("
 "id INTEGER PRIMARY KEY,"
 "content TEXT,"
 "created_at INTEGER"
 ")");
 });
 }

 getLine(int id) async {
 final db = await database;
 var res = await db.query("Line", where: "id = ?", whereArgs: [id]);
 return res.isNotEmpty ? Line.fromJson(res.first) : null ;
 }
</code></pre></div><ul><li>package를 사용해도 sql 문구를 통해 Database를 만들고, data를 불러와야 했습니다. <code>,</code> 같은 사소한 오타가 적지 않게 개발 시간을 많이 잡아 먹었습니다.</li><li>data를 가지고 와서 json으로 변경을 해주어야 했습니다. 이 과정에 <code>dynamic</code>, <code>factory</code>라는 개념을 사용 했는데, 정확히 이해를 하지 못하고 구현했습니다. 나중에 기회가 되면 공부를 해봐야겠습니다.</li></ul>프로젝트하면서 제일 스트레스 받고, 시간이 오래걸렸던 부분이였습니다. 특히 db를 불러오려면 dart의
<a href="https://dart.dev/tutorials/language/futures">Future</a> 개념을 이해해야 하는데, 빨리 끝내고 싶어 모르는 상태에서 개발한다고 삽질 좀 했습니다. 역시 시간을 아낄려면, 미리 공부를 해야합니다…<h2 id="-home">🏠 Home</h2>앱을 켰을 때 첫 화면은 글을 바로 쓸 수 있게 만들었습니다.<h2 id="-list">️️️️📄 List</h2>작성 된 글을 볼 수 있는 페이지입니다. 수정은 불가하고, 삭제만 가능합니다.
처음 기획이 한 줄 메모장이여서 각 메모마다 자세히 보는 기능은 만들지 않았습니다.<h2 id="ℹ-app-icon">ℹ App Icon</h2>App Icon은 App Icon을 설정하기 위해서는 iOS, Android에 직접 접근하여 각 플랫폼에 맞게 설정 해줘야 합니다.설정하는 것은 어렵지 않지만, 한 번에 관리 하고 싶다면 아래 package로 flutter 프로젝트 단에서 관리 할 수 있습니다.<a href="https://pub.dev/packages/flutter_launcher_icons">flutter_launcher_icons</a><img loading="lazy" src="https://callmemaru.com/image/Flutter-%ed%86%a0%ec%9d%b4-%ed%94%84%eb%a1%9c%ec%a0%9d%ed%8a%b8-%ed%9b%84%ea%b8%b0-2/flutter-image-3.png" alt="">그런데 2019 Google I/O에서 flutter로 iOS, Android, Desktop App, 그리고 Web을 한 번에 개발 할 수 있게 할거라는 발표를 듣고, 생각이 바꼈습니다.안 그래도 iOS 개발을 해야 하는 프로젝트가 있었는데, flutter로 개발해도 재밌을거 같습니다.flutter가 꽃길만 걷길 기원하면서 이번 글 마치겠습니다. 감사합니다<hr>참고<ul><li><a href="https://developers.googleblog.com/2019/05/Flutter-io19.html">https://developers.googleblog.com/2019/05/Flutter-io19.html</a></li></ul></div></div>

Call Me Maru

CHOI HEE JAE

1편에서 이어서 2편은 프로젝트를 진행 과정을 소개하고 후기를 마무리 하겠습니다.
🗂 Flutter  Widget  Flutter에서 대부분의 UI들은 Widget Class에 속해 있습니다. 예를 들어, AlertDialog 문서를 보면 AlertDialog가 어디에 속해있는지 확인 할 수 있습니다.
StatelessWidget & StatefulWidget  React를 사용해보신 개발자 분들에게는 친숙한 개념일 수도 있습니다. Flutter의 모든 UI 즉 Widget은 상태(state)를 가집니다.
Widget이 StatelessWidget을 상속 할 때는 상태가 변하지 않아도 되는 UI로 그려집니다.
Widget이 StatefullWidget을 상속 할 때는 상태가 변하는 UI로 그려집니다.

[Flutter] 토이 프로젝트 후기 - (2)

댓글