FlutterFlowで旅行アプリ作ってみた

# はじめに
FlutterFlow公式チュートリアルに乗っ取って作ってみました。
英語ドキュメントしかないので、日本語ドキュメントでチュートリアルを実施したい方は本記事が参考になると思います。

:::note info
**Tips：学べること**
- ページの構築とデザイン（UI要素の追加）
- 条件に応じたウィジェットの表示
- ページ遷移
- アニメーション追加
- タイポグラフィ機能
- アプリの色の変更とダーク/ライトテーマモードの設定
- ローカルデータの保存と取得 / Firestoreデータの保存と取得
- UI要素へのアクション追加
- アプリ実行
:::

以下アプリの完成品です。
![Videotogif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3694358/3d95757b-ad1f-347e-b072-25c5f2f9c24f.gif)

# 目次
<!-- タイトルとアンカー名を編集 -->
1. [プロジェクトのクローン](#Chapter1)
2. [UIの構築](#Chapter2)
2.1 [ホーム(home)ページの作成](#Chapter2.1)
2.2 [お気に入り(favorites)ページ作成](#Chapter2.2)
2.3 [ホームページ⇒お気に入りページへの遷移](#Chapter2.3)
3. [デザインのカスタマイズ](#Chapter3)
3.1 [アニメーション追加](#Chapter3.1)
3.2 [タイポグラフィの変更](#Chapter3.2)
3.3 [アプリの色変更](#Chapter3.3)
4. [データ・ロジックの追加](#Chapter4)
4.1 [Firebase接続](#Chapter4.1)
4.2 [データの収集・追加](#Chapter4.2)
4.3 [ホームページに観光地のリストを表示](#Chapter4.3)
4.4 [お気に入り状態を決定する条件追加](#Chapter4.4)
4.5 [お気に入り状態を更新](#Chapter4.5)
4.6 [お気に入りページに観光地を表示](#Chapter4.6)
5. [アプリ実行](#Chapter5)
7. [参考文献](#Chapter7)

<!-- 各チャプター -->
<a id="#Chapter1"></a>
# プロジェクトのクローン
先ずは新しいプロジェクトを作成します。
スターターアプリがあらかじめ用意されているのでそれを利用します。
以下リンクを開き、Cloneボタンをクリックすると、自分のアカウントにプロジェクトが追加されます。
[参考動画](https://www.loom.com/share/f8522aeb0c654f6faa3b97cf1d55bb22?sid=44052948-d169-4ef1-841e-bba2dc7a06d3)

- [https://app.flutterflow.io/project/travel-example-starter-0xqm6o](URL)

<a id="#Chapter2"></a>
# UIの構築
ホーム(Home)ページとお気に入り(Favorites)ページに、ウィジェットを追加します。
また、2つのページ間にナビゲーション(画面遷移)を追加します。

:::note warn
**Tips: ウィジェットとは**
ページのレイアウトを構築するのに役立つUI要素のことです。
![ウィジェット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3694358/4b812cb8-7429-33dc-259d-10a545692f16.png)
:::

<a id="#Chapter2.1"></a>
## ホーム(home)ページの作成
人気の観光地を表示する、基本となるページを作成します。


■ **AppBarにIconButtonウィジェットの追加**
- AppBar に IconButtonウィジェット を追加します。
- プロパティパネルから、Fill Color(塗りつぶしの色)、 Border Color(線の色 )、 Border Width(線の幅)を削除します。
- AppBar に ハートアイコンを設定します。 これは、ユーザーがお気に入り(Favorites)ページに移動するために使用されます。
[参考動画](https://www.loom.com/share/38a5170871434937aa4d680bdabb24e5?sid=49da7a21-a6a2-4f8c-9cd0-2653c3b7b78e)

■ **ListViewウィジェットの追加**
- ウィジェットツリーを開き、Columnの中にListViewウィジェットを追加します。
- プロパティパネルからExpandedを選択し、利用可能なスペースをすべて使用するようにします。(以下、画像を参照してください)
- Expandedを選択しないと、ListView内がスクロールできない不具合が発生するため必ず設定してください。
- ListViewの中に、Templatesから card_54_TravelCard を追加します
- 追加した card_54_TravelCard 内の Price Containerウィジェットを削除します。
[参考動画](https://www.loom.com/share/9623f44203cc41448148a6cf2d55fb33?sid=14c0b4b5-b1a8-4205-abea-1595cc6c0f93)

■ **Conditional Builderの追加**
- 観光地名の右側に、Conditional Builder(条件ビルダー)ウィジェットを追加します。このウィジェットは、観光地がお気に入りとしてマークされているかどうかに基づいて、動的に異なるハートアイコンを表示します。
- 条件は、この後のセクションで追加します。とりあえず、IF条件とELSE条件のために、有効なハートアイコンと無効なハートアイコンを持つIconButtonウィジェットを追加します。(この条件を設定していないので画面右上にバグマークが表示されますが、後で実装するため今はスルーしてください。)
[参考動画](https://www.loom.com/share/7989a4ae391f4a839e8a37cedb503884?sid=68c405b5-76e3-4eb0-b1a6-3521e68cb463)

<a id="#Chapter2.2"></a>
## お気に入り(favorites)ページ作成
お気に入りページは、ユーザーが保存したお気に入りの観光地のリストを表示します。
テンプレートから「Lists > List 08 - Product List」を選択し、新しいページを追加します。
名前を付けて、不要なウィジェットを削除し、AppBarのタイプをデザインに合わせて変更します。

[参考動画](https://www.loom.com/share/ad2a62292bd34225ab297f5650fd301e?sid=e8526b67-3f3a-498f-8488-6f711563ca3c)

<a id="#Chapter2.3"></a>
## ホームページ⇒お気に入りページへの遷移
ウィジェット（AppBarのハートアイコンボタンなど）にNavigate Toアクションを追加することで、ホームページからお気に入りページに遷移する機能を実装できます。

[参考動画](https://www.loom.com/share/e03a0d5438864c12b92b9becaa49c696?sid=9f70cab6-84d5-4f9b-8c67-ce6218b91ebc)

<a id="#Chapter3"></a>
# デザインのカスタマイズ
このステップでは、アニメーションを追加し、フォントとアプリの色を変更し、
ダークまたはライトのテーマモードを設定します。

<a id="#Chapter3.1"></a>
## アニメーション追加
アニメーションはアプリをよりリッチに見せるのに役立ちます。
card_54_TravelCardウィジェットにスライドアニメーションを追加してみましょう。

[参考動画](https://www.loom.com/share/634d6da7749f4703933778bfcfedbed4?sid=0bdd26a0-24ce-4ab4-8125-c068a6c4c4ce)

<a id="#Chapter3.2"></a>
## タイポグラフィの変更
テキストのスタイルをカスタマイズしてみましょう。
FlutterFlowでは、アプリ全体のフォントスタイルをコントロールすることができます。
個々のウィジェットごとにフォントを変更する必要はありません。
Typographyセクションに移動して、アプリ全体のフォントを調整してみましょう。

[参考動画](https://www.loom.com/share/6870d896ba3745369d883abd207f844f?sid=1830337e-ffd1-474e-b05b-404abaab916e)

<a id="#Chapter3.3"></a>
## アプリの色変更
テーマ設定 ＞ 色メニューから色を変更することで、アプリの外観をカスタマイズできます。
さらに、ダークまたはライトのテーマカラーを設定できます。

[参考動画](https://www.loom.com/share/19698b96ce00467e90dde80b1b61b02a?sid=2adf1cc5-c24b-492a-b92a-861b96d6bb57)

<a id="#Chapter4"></a>
# データ・ロジックの追加
アプリを機能させるために必要なデータとロジックを追加します。

<a id="#Chapter4.1"></a>
## Firebase接続
Firestore Databaseからデータを保存・取得するためには、プロジェクトをFirebaseに接続する必要があります。
Firebaseプロジェクトの接続に関する詳細は以下URLを参考にしてください。
- https://docs.flutterflow.io/data-and-backend/firebase/firebase-setup#add-firebase-to-an-existing-project

正しく接続されると下図のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3694358/48d1638b-98ee-6e96-5d6d-d813755c4cc7.png)

<a id="#Chapter4.2"></a>
## データの収集・追加
それぞれの観光地について、名前、画像、評価、お気に入りのステータスのデータを表示します。
観光地についてこれらの情報を保存するには、 'places'という名前のコレクションを作成します。
以下のようにフィールドを追加します：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3694358/1ec30391-5624-2e1d-65bc-25ad27c74d80.png)

素早くデータを追加するには、すべての観光地の情報を含む以下のCSVファイルを使用できます。
CSVファイルは、[こちら](https://docs.flutterflow.io/getting-started/build-your-first-app/travel-app-firestore-data#id-4.2-creat-collection-and-add-data)のリンクからダウンロードしてください。
以下はデータが追加された後の様子です：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3694358/76d7da77-ca1b-7912-4fa9-6cd1a048ffdc.png)

<a id="#Chapter4.3"></a>
## ホームページに観光地のリストを表示
リストビュー・ウィジェットに場所を表示するには、まずコレクションをクエリし、
[Set from Variable ]メニュー > [collection_name] Documentと [Available Options to Field todisplay data from]を使用して、ウィジェットにデータを表示します。

[参考動画](https://www.loom.com/share/eb9975ff6ae241aab2f734374911ae36?sid=2125887d-4abe-44c5-bb42-75797ebb9c25)

<a id="#Chapter4.4"></a>
## お気に入り状態を決定する条件追加
観光地がお気に入りとしてマークされているかどうかを判断する条件を追加してみましょう。
ConditionalBuilderウィジェット（ステップ 2.1で追加 ） > IF セクション > Unset > [collection_name] Document > フィールド名（お気に入りのステータスを保持、つまり'is_favorite'）を選択します。
ここでは、'is_favorite'の値を直接指定しています。
つまり、その観光地がお気に入りとしてマークされていれば、Ifウィジェットの下に追加されたウィジェット 、つまり実線のハートアイコンが表示されます。
そうでない場合は、Elseウィジェットの下に追加されたウィジェット、つまり輪郭のあるハートが表示されます。

[参考動画](https://www.loom.com/share/b2dd8ac333a54bf0b19c2d65a0d2e727?sid=fcbe98ae-023f-40de-acf0-1f05a307abcb)

<a id="#Chapter4.5"></a>
## お気に入り状態を更新
ユーザーがハートアイコンボタンをクリックするたびに、その場所の is_favorite フィールドのステータスを更新する必要があります。
Firestoreの Update Document アクションを使用して、これを行うことができます。
両方のIconButtonウィジェットにこのアクションを追加して、一方をFalse、もう一方をTrueとしてステータスをマークする必要があります。

[参考動画](https://www.loom.com/share/b8ba8e012313497091e3395f3c032d4d?sid=e40c8d28-019e-4484-b8ce-fc58f2fe6fac)

<a id="#Chapter4.6"></a>
## お気に入りページに観光地を表示
お気に入り(Favorites)ページに観光地を表示する手順は、ホーム(Home)ページとほとんど同じです（ステップ 4.3参照 ）。
主な違いは、お気に入り(Favorites)ページでは、観光地をフィルタリングし、お気に入りとしてマークされた観光地のみを表示する必要があることです。

[参考動画](https://www.loom.com/share/fe64e9ff631e4db28115500c72a88cf3?sid=80bea03c-6d51-41d7-a551-5a1b40a1798f)

<a id="#Chapter5"></a>
# アプリ実行
実行してどう動くか見てみましょう。
FlutterFlowでは 、Runモードでアプリの完全に機能するバージョンをテストすることができます。
Runモードでは通常2～4分程度（プロジェクトの規模によってはそれ以上）の時間がかかります。
変更をすぐに確認するには、 Flutterの "Hot Reload"機能を使うTestモードでアプリを実行することが できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3694358/07ad65fe-eb91-f256-bd17-70a55b1edc41.png)


<a id="#Chapter7"></a>
# 参考文献
- [FlutterFlow 公式チュートリアル](https://docs.flutterflow.io/getting-started/build-your-first-app/travel-app-firestore-data)