FlutterFlowでCSVファイルのダウンロードボタンを作ってみる。ノーコード開発会社の選び方｜開発実績127件の技術者が6つの必須確認項目を解説

こんにちは。FlutterFlowのアプリから、データをCSVファイルでダウンロード（エクスポート）する機能が欲しい、、、ってこともありますよね。

でもFlutterFlowのデフォルトの機能ではできないと思います。

そのため、今回はカスタムウィジェットを使ってコードを書いてCSVダウンロード機能を作ってみました。

また、今回もローコードとしてコードを書く部分はAIを使って開発しました。こちらの記事で紹介しているCursorを使って、AI（ChatGPT）にコードを書いてもらいました。

AI、めちゃくちゃ優秀ですね、、、ノーコード（ローコード）がAIで加速します。。

それでは、FlutterFlowでのCSVエクスポート機能を紹介したいと思います。

最後の方に動画でも解説しているので興味のある方はそちらもどうぞ。

CSVエクスポート機能：完成イメージ

こんな感じでCSVダウンロードボタンを置いて、

クリックすると以下のようにcsvがダウンロードされるイメージです。

まずはData Typeを定義

こんな感じでCSVデータを入れる箱を定義します。今回は法人テーブルみたいなのをエクスポートするイメージで、id、name、createdのカラムを用意しました。

今回はAppStateにデータを直接突っ込んでおいてそれをエクスポートするサンプルを作ります

新規カスタムウィジェットを追加

新規にCustom Widgetを追加し、パラメータに先ほど作ったDate Typeのリストを設定します。そして右上の緑ボタンからBolierplate Widget CodeをCopy to Editorします。

このコードをコピーしておき、Cursor.shに移動しましょう。

Cursorにファイルを作成しさっきのコードを貼り付ける

こんな感じです。ここからAIの力を借ります。

以下のようなプロンプトを書いてみました。

『このコードをベースにcsyを出力するボタンを作ってください。
CorporationStructにはid,name,createdを持っています。
ポタンを押すとインプットのCOrporationsStruet型のリストを元にcsvファイルを生成しダウンロードします。』

これで実行すると・・・

↓なんかそれっぽいコードを出力してくれました。

これをFlutterFlow側に貼り付けて実行してみます。

僕がやった時はエラーが出たのでそのエラーをCursor側でAIに聞くと修正版のコードを書いてくれます。これを何度か繰り返して完成に持っていきます。

UIを設定して完成

あとは以下のようにコンポーネントからカスタムWidgetを選択し配置し、パラメータやアクションを設定して完成です。

AIがあればプログラミングが苦手な人でもカスタムコードが怖くないですね！

FlutterFlowでCSVダウンロードボタン：Youtube動画での解説はこちら

動画の方では詳しく解説しているので興味のある方はこちら

アプリ・Webサービスの開発の無料相談はこちら

FlutterFlow、Adalo、bubble、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。

この機会に、温めていたビジネスアイデアを今すぐ形にしてみませんか？

弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。

また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。

アプリ／Webサービスの開発、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。