Flutterを体験しよう4-2 ~Flutterでアプリを作ってみる2~

 前提記事

kenteiblog.hatenablog.com



 

ということで、公式のドキュメントを参考にしながら、手順通り進めていきたいと思います。今回は、実際にアプリを作ってみようという話の続きです。

Write Your First Flutter App - Flutter

 

1ページが長いので、今日は第2弾ということで最後まで読み進めます。

 

では、以下からスタート。

 

自分のFlutterアプリを書いてみよう

ドキュメント上は以下の7つのステップに分かれています。

  • Step1: Flutterアプリの開始点を作成
  • Step2: 外部パッケージを使用
  • Step3: Stateful Widgetを追加
  • Step4: 無限にスクロールするリストビューを作成
  • Step5: 対話性を追加
  • Step6: 新しい画面への遷移
  • Step7: テーマを利用しUIを変更

本記事では、Step5~Step7を説明していきます。(上記の青文字部分)

 

 

1. Step5: 対話性を追加

Step4までで、名前の一覧を表示するという動きを実現できました。

次は、対話性(インタラクティブ)を実装していきます。
先に結論から述べてしまうと、以下ができるようになります。

  • 一覧の各行にハートマークが表示され、押すことでONOFFを切り替えられる。
  • 上記のONOFFはスクロールして戻ってきても残ったままになっている。(状態を保存している)

 

(1) 以下のように、lib/main.dartを修正します。(コードの説明はコメントで書いています。文頭の番号は実装順と同じです)

 

flutterアプリを作ってみたい5-1

 

(2)Hot Reloadして以下のような表示となります。

 

f:id:kentei0715:20180325121356p:plain

 

ハートアイコンを押すことで、ON(ハートが赤い状態)とOFF(ハートが白抜きの状態)を切り替えることができます。この状態は、無限スクロールを繰り返した後でも、消えることなく残っています。

 

2. Step6: 新しい画面への遷移

 

ここでは、新しい画面への遷移の方法を示します。

また、Flutterでは画面のことを「route(ルート)」と呼ぶらしいので、説明上「ルート」といったら画面のことと解釈してください。

 なお、先にできることの結論から言ってしまうと、以下のとおりです。

  • アプリケーションバーの右方にボタンを設置。押すと新ルートに遷移できる
  • 新ルートではお気に入り登録した名前(ハートマークON)の一覧が表示される

 

(1) 以下のように、lib/main.dartを修正します。(コードの説明はコメントで書いています。文頭の番号は実装順と同じです)

 

flutterアプリを作ってみたい6-1

 

(2)Hot Reloadして以下のような表示になります。

 

f:id:kentei0715:20180325122920p:plain

アプリケーションバーの右のほうにあるアイコンを押すと、画面が遷移してお気に入り一覧が表示されます。
上記画像のとおり「HeadBird、SharpEast、WebSpread」がお気に入り登録されているので、遷移後もそれらが表示されています。

なお余談ですが、新ルートに表示されている戻るボタン(←ボタン)は特に実装しなくても、Navigatorがよしなにやってくれるものです。

 

3. Step7:テーマを利用しUIを変更

 

一応、前のステップまででアプリの動作は出来あがっています。

最後はUIの見た目を変えてみましょうという話です。おまけ的な話ではあるので、軽く読んでいただければと思います。(修正も微量です)

 

(1) 以下のように、lib/main.dartを修正します。

 

flutterアプリを作ってみたい7-1

 

(2)Hot Reloadすると以下のような表示になります。

 

f:id:kentei0715:20180325123730p:plain

 

前ステップまでの画像と比較してみてください。アプリケーションバーの部分の背景色が青色から白色に変わっているはずです。

 

 

 

4. 終わりに

ということで、前回記事も含めてStep1~Step7まで見てきました。
ここまでで以下のことが体験できました。

  • Flutterアプリの地盤からの開発
  • Dartコードで記述
  • 外部のサードパーティ製のライブラリを利用
  • より速い開発サイクルのためのHotReloadを利用
  • Stateful Widgetの実装、およびアプリへの対話性の追加
  • 遅延ロードの実装、および無限のスクロールの実現
  • ルートの作成と遷移ロジックの実装
  • テーマ利用によるアプリのUI表示の変更

なかなか盛沢山でしたね(>_<) 

 

と、ここまでが今日の説明。次回は体験の最終回です。

最初に述べた通り、私が訳した結果については、続きからの形で隠しておきます。

(日本語訳もかなり怪しくなってきました…w)

 

以上です。

2018/3/25 賢帝俊来