はじめに
FlutterFlow公式チュートリアルに乗っ取って作ってみました。
英語ドキュメントしかないので、日本語ドキュメントでチュートリアルを実施したい方は本記事が参考になると思います。
Tips：学べること
- ページの構築とデザイン（UI要素の追加）
- 条件に応じたウィジェットの表示
- ページ遷移
- アニメーション追加
- タイポグラフィ機能
- アプリの色の変更とダーク/ライトテーマモードの設定
- ローカルデータの保存と取得 / Firestoreデータの保存と取得
- UI要素へのアクション追加
- アプリ実行
以下アプリの完成品です。
目次
- プロジェクトのクローン
-
UIの構築
2.1 ホーム(home)ページの作成
2.2 お気に入り(favorites)ページ作成
2.3 ホームページ⇒お気に入りページへの遷移 -
デザインのカスタマイズ
3.1 アニメーション追加
3.2 タイポグラフィの変更
3.3 アプリの色変更 -
データ・ロジックの追加
4.1 Firebase接続
4.2 データの収集・追加
4.3 ホームページに観光地のリストを表示
4.4 お気に入り状態を決定する条件追加
4.5 お気に入り状態を更新
4.6 お気に入りページに観光地を表示 - アプリ実行
- 参考文献
プロジェクトのクローン
先ずは新しいプロジェクトを作成します。
スターターアプリがあらかじめ用意されているのでそれを利用します。
以下リンクを開き、Cloneボタンをクリックすると、自分のアカウントにプロジェクトが追加されます。
参考動画
UIの構築
ホーム(Home)ページとお気に入り(Favorites)ページに、ウィジェットを追加します。
また、2つのページ間にナビゲーション(画面遷移)を追加します。
Tips: ウィジェットとは
ページのレイアウトを構築するのに役立つUI要素のことです。
ホーム(home)ページの作成
人気の観光地を表示する、基本となるページを作成します。
■ AppBarにIconButtonウィジェットの追加
- AppBar に IconButtonウィジェット を追加します。
- プロパティパネルから、Fill Color(塗りつぶしの色)、 Border Color(線の色 )、 Border Width(線の幅)を削除します。
- AppBar に ハートアイコンを設定します。 これは、ユーザーがお気に入り(Favorites)ページに移動するために使用されます。
参考動画
■ ListViewウィジェットの追加
- ウィジェットツリーを開き、Columnの中にListViewウィジェットを追加します。
- プロパティパネルからExpandedを選択し、利用可能なスペースをすべて使用するようにします。(以下、画像を参照してください)
- Expandedを選択しないと、ListView内がスクロールできない不具合が発生するため必ず設定してください。
- ListViewの中に、Templatesから card_54_TravelCard を追加します
- 追加した card_54_TravelCard 内の Price Containerウィジェットを削除します。
参考動画
■ Conditional Builderの追加
- 観光地名の右側に、Conditional Builder(条件ビルダー)ウィジェットを追加します。このウィジェットは、観光地がお気に入りとしてマークされているかどうかに基づいて、動的に異なるハートアイコンを表示します。
- 条件は、この後のセクションで追加します。とりあえず、IF条件とELSE条件のために、有効なハートアイコンと無効なハートアイコンを持つIconButtonウィジェットを追加します。(この条件を設定していないので画面右上にバグマークが表示されますが、後で実装するため今はスルーしてください。)
参考動画
お気に入り(favorites)ページ作成
お気に入りページは、ユーザーが保存したお気に入りの観光地のリストを表示します。
テンプレートから「Lists > List 08 - Product List」を選択し、新しいページを追加します。
名前を付けて、不要なウィジェットを削除し、AppBarのタイプをデザインに合わせて変更します。
ホームページ⇒お気に入りページへの遷移
ウィジェット（AppBarのハートアイコンボタンなど）にNavigate Toアクションを追加することで、ホームページからお気に入りページに遷移する機能を実装できます。
デザインのカスタマイズ
このステップでは、アニメーションを追加し、フォントとアプリの色を変更し、
ダークまたはライトのテーマモードを設定します。
アニメーション追加
アニメーションはアプリをよりリッチに見せるのに役立ちます。
card_54_TravelCardウィジェットにスライドアニメーションを追加してみましょう。
タイポグラフィの変更
テキストのスタイルをカスタマイズしてみましょう。
FlutterFlowでは、アプリ全体のフォントスタイルをコントロールすることができます。
個々のウィジェットごとにフォントを変更する必要はありません。
Typographyセクションに移動して、アプリ全体のフォントを調整してみましょう。
アプリの色変更
テーマ設定 ＞ 色メニューから色を変更することで、アプリの外観をカスタマイズできます。
さらに、ダークまたはライトのテーマカラーを設定できます。
データ・ロジックの追加
アプリを機能させるために必要なデータとロジックを追加します。
Firebase接続
Firestore Databaseからデータを保存・取得するためには、プロジェクトをFirebaseに接続する必要があります。
Firebaseプロジェクトの接続に関する詳細は以下URLを参考にしてください。
正しく接続されると下図のようになります。
データの収集・追加
それぞれの観光地について、名前、画像、評価、お気に入りのステータスのデータを表示します。
観光地についてこれらの情報を保存するには、 'places'という名前のコレクションを作成します。
以下のようにフィールドを追加します：
素早くデータを追加するには、すべての観光地の情報を含む以下のCSVファイルを使用できます。
CSVファイルは、こちらのリンクからダウンロードしてください。
以下はデータが追加された後の様子です：
ホームページに観光地のリストを表示
リストビュー・ウィジェットに場所を表示するには、まずコレクションをクエリし、
[Set from Variable ]メニュー > [collection_name] Documentと [Available Options to Field todisplay data from]を使用して、ウィジェットにデータを表示します。
お気に入り状態を決定する条件追加
観光地がお気に入りとしてマークされているかどうかを判断する条件を追加してみましょう。
ConditionalBuilderウィジェット（ステップ 2.1で追加 ） > IF セクション > Unset > [collection_name] Document > フィールド名（お気に入りのステータスを保持、つまり'is_favorite'）を選択します。
ここでは、'is_favorite'の値を直接指定しています。
つまり、その観光地がお気に入りとしてマークされていれば、Ifウィジェットの下に追加されたウィジェット 、つまり実線のハートアイコンが表示されます。
そうでない場合は、Elseウィジェットの下に追加されたウィジェット、つまり輪郭のあるハートが表示されます。
お気に入り状態を更新
ユーザーがハートアイコンボタンをクリックするたびに、その場所の is_favorite フィールドのステータスを更新する必要があります。
Firestoreの Update Document アクションを使用して、これを行うことができます。
両方のIconButtonウィジェットにこのアクションを追加して、一方をFalse、もう一方をTrueとしてステータスをマークする必要があります。
お気に入りページに観光地を表示
お気に入り(Favorites)ページに観光地を表示する手順は、ホーム(Home)ページとほとんど同じです（ステップ 4.3参照 ）。
主な違いは、お気に入り(Favorites)ページでは、観光地をフィルタリングし、お気に入りとしてマークされた観光地のみを表示する必要があることです。
アプリ実行
実行してどう動くか見てみましょう。
FlutterFlowでは 、Runモードでアプリの完全に機能するバージョンをテストすることができます。
Runモードでは通常2～4分程度（プロジェクトの規模によってはそれ以上）の時間がかかります。
変更をすぐに確認するには、 Flutterの "Hot Reload"機能を使うTestモードでアプリを実行することが できます。
