はじめてのFlutter

iXIT株式会社の堀です。

新しい事をはじめたいと思い、グループ会社でも採用が決まったFlutterの勉強をはじめました。
2018年末にGoogleからFlutterがリリースされ、2年以上も経つのでネット上にも情報がたくさん載っています。 同じようにこれから始める人の参考になればと思い記事書かせて頂きます。(技術的要素はほぼありません)

何本か入門記事を読んだあと、環境構築。
Android StudioXcodeもすでにインストール済みだったので、あっという間に環境が出来上がりました。
最近のフレームワークは手とり足取り感満載ですね!
その後は、毎度おなじみ「Hello World」かと思いきや、用意されているサンプルアプリはカウンターアプリでした。
ソース内にコメントもいっぱい!(英語だけど)

カウンターアプリ
カウンターアプリ

Dartの入門書を見ながら、軽くソースを解析。 これだけのステップ数でスタイルもまとめて出来ちゃうなんてFlutterすごいかも。 (ただし、規定外のデザインにする時大変そうな気が・・・)

次の1歩として新しいアプリを作ろうと思い、見つけたのがこちら。

eh-career.com

解説も細かく書かれており、入門アプリにはちょうど良さそう!
早速、記事を見ながらプログラミング・・・
あれ?記事通りに書いてるのにエラーが・・・
スペルミスかなっと思いコピペ。それでもエラーが解消されないので、エラーメッセージで検索。 いっぱい出てきました。「その書き方もう使えないよ〜」ってコメントでした。 最近よく聞く「破壊的変更」ってやつですね。
下位互換はせず、新しく作り直してシンプルにする!って方針は賛成ですが、古い記事に惑わされて情報の海で溺れないように要注意です。

上記の解説ページとバージョン違いで出たエラーを潰しながら、どうにか完成。
Githubリポジトリ見てもつまらないので、Excite Tech Blogを表示できるように改良。

記事一覧アプリ
記事一覧アプリ

もうちょっとステップアップしてFirebaseと絡めたアプリを作りたいなと思っていたところ、程よいサンプルアプリ見つけました!

github.com

Github上にソースだけでなくFlowchartや利用するAPIリンクなどもキレイに纏められています。
Youtube3本立てのTutorialもあるのでこちらを見ながら実装。
(解説は英語ですが聞き取りやすい話し方ですし、コード見ながらなので分かりやすいです)
バージョン違いによるエラーを解消しつつ、Tutorial#2まで完了。

投票アプリ
投票アプリ

引き続き、完成を目指して進めて行きたいと思います。

YoutubeにはTutorialがたくさん載っています。
英語だからと諦めてしまうには勿体ないくらい素敵な動画も多いので、みなさんもぜひ挑戦してみてください!