ラベル Flutter の投稿を表示しています。 すべての投稿を表示
ラベル Flutter の投稿を表示しています。 すべての投稿を表示

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 件のコメント:
ラベル: , ,

2019年4月7日日曜日

Flutter入門でiOSとAndroidにアプリをビルドした

Flutterに入門することにしました。

Flutter（フラッター）は、Googleによって開発されたフリーかつオープンソースのモバイルアプリケーションフレームワークである。FlutterはAndroidやiOS向けのアプリケーションの開発に利用されている。Fuchsiaではアプリケーションの開発は主にFlutterを利用して行われている[4]。
2018年12月4日、ロンドンで開催されたFlutter Live '18にて、初の正式版となるFlutter 1.0のリリースが発表された[5]。

iOSアプリにするためにはXcodeが必須なので開発機はMacがいいと思います。

セットアップ


Flutterの公式がよくできてるのでスムーズに行くと思います。とはいえ英語なので、Flutterの日本語本もあります。僕は本を使いました。

技術書典にも本が頒布されていますので、Amazonやhontoなどで購入してみるのも手です。



Flutter情報のキャッチアップ


flutter公式Twitterがあります。2週間ごとに更新があるようです。

東京ではFlutter Meetupという勉強会もあります。Twitterもあります。

Flutterの学習


monoさんという方がいくつか方法を示しています。

僕は本 -> 公式チュートリアル -> Udacity、という順番で計画しています。
その後は自分の好きなものを作るようにしようかと。

所感・つまづき


iOSのビルドに慣れなかったので小一時間ひっかかりました。

本にはFeedParserを使えとありましたが、もうないようです。
その代わりにWebFeedが使えるようです。
ソースコードにも変更があるので一部載せます。

  void getItem() async {
    Response res = await get(item.link);
    print(item.link);
    dom.Document doc = dom.Document.html(res.body);
    dom.Element hbody = doc.querySelector('.tpcNews_summary');
    dom.Element htitle = doc.querySelector('.tpcNews_title');
    dom.Element newslink = doc.querySelector('.tpcNews_detailLink a');

Yahoo!側のHTMLに変更があるので、合わせてあげるとうまく行きます。

ソースコードは括弧が多いのが気になります。IDEでも気になります。頑張れば減らせるかもしれませんが。

個人開発や小規模な開発ならFlutterが良さそうだと思います。
次期OSのメイン言語になりそうなので今後も期待できそうです。

投稿者 時刻: 0 件のコメント:
ラベル: ,
登録: 投稿 (Atom)