FlutterでTimeCrowdアプリを作る その1: 導入編
Flutter、ご存知でしょうか？
クロスプラットフォームなアプリを作るツールの1つで、Google社によって開発が進められています。
この分野でよく使われるであろうReact Nativeと比較すると、UIを独自描画するという部分が特徴的だと思います。
全環境Material Designでいい、というような場合には便利に使えるのではないでしょうか。
現在、Flutter Createというコンテストが開催されており、僕はそれがきっかけで触り始めました。
コンテスト用の作品を一通り作り終えた後、iOSとAndroidの実機で試したのですが、全く手直しが必要なくて感動しました。
（クロスプラットフォーム系のツールはいざデバイスで動かすと、調整が必要になることも多いので）
さて、コンテストへの応募が終わり、作るものがなくなってしまいました。
そこで、ブログのネタとしてFlutterを触ることで、合法的に業務時間に取り組もうというわけです。
作るもの
TimeCrowdはツール系アプリで凝ったUIも必要なく、Flutterに向いていると思われるので、TimeCrowdのクライアントアプリを作ります。
1つの記事で詰め込みすぎると作業量が多くなって続かくなってしまうので、ゆっくり進めていきます。
導入編の今回は、プロジェクトを作成して色をタイムクラウドっぽくすることろまでやります。
インストール
Flutterは公式ドキュメントがとても充実しています。
Macの場合、以下の通りの手順で進められるはずです。
エディタはVS CodeとAndroid Studioが主な選択肢となりますが、僕はエディタを設定する作業が好きではないので、デフォルト状態で至れり尽くせりになっているAndroid Studioを使っています。
プロジェクト作成
Android Studioを開き、 Start a new flutter project から進んでいきます。
作るのは Flutter Application です。
あとは、適当に名前などを入れます。
Finish をクリックするとプロジェクトが作成されるので、iOSシミュレーターを起動・選択して実行します。
Android StudioからiOSシミュレーターを操作するのはなんだか不思議な気分ですね。
これでシンプルなカウンターアプリが完成しました。
色を変更
このままではいかにもHello Worldな見た目でやる気もでないので、タイムクラウド風の色に変更してみます。
変更箇所は以下のコミットをご覧ください。
この状態で保存すると、ホットリロードされてこうなります。
タイムクラウドっぽくなりましたね！
次回以降、機能を追加していきたいと思います。
期待せずにお待ち下さい。
