こんにちは。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動画での解説はこちら動画の方では詳しく解説しているので興味のある方はこちら%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FLakAmFyhi-A%3Fsi%3Dxd08biKzEGZaGDLh%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3Eアプリ・Webサービスの開発の無料相談はこちらFlutterFlow、Adalo、bubble、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。この機会に、温めていたビジネスアイデアを今すぐ形にしてみませんか？弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。アプリ／Webサービスの開発、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。