2019年12月22日日曜日

Flutter for Webで簡単なToDoリストを作るぞ

この記事はFlutter #2 Advent Calendar 2019の21日目です。

前回はこちら
次回はこちら

1日遅れてすいません。しかも解説は追記予定です。
ソースコードだけは置くので参考になれば幸いです。

(追記2020/2/16)
githubにプロジェクトコードを置きました。
Firebaseでデモを置きました。



最近Dartを使っているので、Flutterを再び勉強するモチベーションが出てまいりました。Flutterは以前少しだけ触って放置していたので、改めてキャッチアップしてみると、なんとFlutter for Webというのがあったので興味本位で触ってみることにしました。

そういうわけでFlutter for Webで簡単なTodoリストを作ります。

やること


開発するときにみた情報源の話。作り始めのころの雰囲気を記録したいと思います。なので読みにくい点もあると思いますが、その時はもし良ければ「読みにくい」ってコメントをお願いします🙇‍♂️

やらないこと


設計周りの話はしません。今はクリーンなアーキテクチャよりもプログラミングを楽しむことに価値を置きたいと思います。

どういうのを作るのか


仕様を決めます。

  • ユーザーはタスクリストを見ることができる。
  • ユーザーはタスク名を入力し、タスクリストに追加できる。
  • ユーザーはタスクリストから終わったタスクをワンクリックで消すことができる。
  • ユーザーはタスクリストに書いたタスクを次回も見ることができる。

足りなければ追加するということで、とりあえずこれで行きます。
あとは画面のモックを作っておきます。
ハイクオリティな画面モック
では取り掛かっていきます。

環境構築


公式の方法に従って導入します。
現在はbetaチャンネルなので今後stableに変わると思います。

というわけでプロジェクトを作ります。

flutter create --org com.akior todolist_app
cd todolist_app
code .

VSCodeであらかじめ設定しておけばこれでプロジェクトで開けるはずです。
あと、VSCodeはFlutterの拡張設定は必要です。

flutter run -d chrome

これでweb画面が起動します。
ちなみにVSCodeからも起動できます。

Touch Barの実行ボタンでも起動できます。白い三角が実行、中抜き三角がデバッグ実行。
lib/main.dartを編集していきます。

完成


タスクを追加する処理です。
ユーザーはタスク名を入力し、タスクリストに追加できる


タスクを削除する処理です。
ユーザーはタスクリストから終わったタスクをワンクリックで消すことができる


更新しても画面は保持されたままです。
ユーザーはタスクリストに書いたタスクを次回も見ることができる

ここにソースコードを示します。



解説

使ったのはAnimatedListとWebStorageです。
アプリならSharedPreferencesを使うところですが、WebなのでWebStorageを使うことができました。使うにはdart:htmlをインポートする必要があります。

おわりに


Flutter for Webで簡単なToDo リストを作成しました🎉
Flutterのお作法で悩みながら楽しく作れたと思います。Widgetツリーを意識しながら構造的に書くことは勉強になりました。

課題として、

  • ネットワークの要素を取り入れる(Firebaseなどと通信する)
  • PWAのように使えるのか調査する(hi fiveみたいにキャッシュにためたあと通信する機構など)
  • オリジナルのデザインをつかう

があげられそうです。

余談


最初にFlutter for Webを書き始めたときは12月始めで、そのときはdevチャンネルでした。
なので12日のFlutter Interactでbetaチャンネルに移行したときは飲み会で一芸を楽しみにしてる感じの声が出ました。
Flutterにsearch.array().






時刻:

0 件のコメント:

コメントを投稿