技術記事

micomia株式会社の畑井です。
今回は管理画面などによく実装されるCSV出力機能を実装する方法について解説していきます。
マーケットプレイスにはFlutterFlowに導入できる機能がたくさんあります。
ここでは有料ならびに無料でFlutterFlowに導入できる機能がたくさん出品されています。

FlutterFlowのマーケットプレイスはこちら

日本人のkinari KURAMOTOさんが作成された機能になります。
CSV出力機能を簡単に自分のアプリに実装できるパッケージを提供しています。

「＋ Add for Free」を押すとアカウントにこのパッケージがインストールされます。

SettingのProject Dependencies→FlutterFlow Librariesにある「Firestore CSV Exporter」を選択してください。

ボタンを置きActionsで「generateAndDownloadCsv」を選択してください。

CollectionのところにはCSV出力したいコレクションの名前を入力してください。

次にCSV出力する際のヘッダーを入力するところがありますが、今回はConstantsにStringのListを設定することで対応します。

今回はサンプルのため3つのヘッダーを設定しました。
ヘッダーは出力には直接関係ないため、出力内容が理解できるようなものを各自設定いただければと思います。

今回設定したConstantsをセットします。
次に入力を求められている「firestoreFieldNames」は実際にFireStoreに定義しているField名を入力してください。
ここで入力するField名のみが出力されます。
また、このField名をStringのListで出力するのもHeaderと同じくConstantsやAppValueなどで定義する流れとなります。

fileNameはお好きな名前を入力してください。
ファイル名に日付を入れたい場合は、オレンジ色のアイコンであるVariableから日付をセットすると可能です。

2.まとめ

今回はFlutterFlowでCSV出力機能を実装しました。
一からCustom Codeで作成することもできますが作成してアップロードしていただいているものを再利用するのがソフトウェア開発では良い考え方とされていますので積極的に再利用を検討しましょう。