今回は FlutterFlowの「カスタムファンクション」について解説します。
この記事では、初心者の方でもわかるように、実際に「税金10%を足す計算」を例にして、基本的な実装方法を紹介します。
カスタムファンクションとは？
FlutterFlowのカスタムファンクションを使うと、Dart言語を使った簡単な計算やロジック処理を実行できます。
例えば、以下のような処理が可能です。
- 数値の計算（例：税率や割引の計算）
- 日付の整形（フォーマット変換など）
- 文字列の変換（例：「tanaka」→「Tanaka」）
- 入力チェック（バリデーション）
- リストの整理（重複削除や並び替え）
これらの処理をカスタムファンクションにまとめておくことで、再利用性が高く、保守しやすいコードを書くことができます。
今回のゴール：消費税10%を自動で足す機能を作る
今回はFlutterFlow上で、ユーザーが金額を入力すると自動的に「税込み価格」を表示する仕組みを作ってみます。
【例】入力：100 → 出力：110円（税率10%）
ステップ①：入力フォームを作成する
まず、ユーザーが金額を入力できるように TextFieldウィジェット を追加します。
- 画面に TextField を設置
- デザインを分かりやすくするために、枠線（ボーダー）を追加
- 入力された値をそのまま表示する RichTextウィジェット を用意
ここで、ユーザーが「100」と入力すると「税抜き価格：100円」と表示されるようにします。
ステップ②：税込み価格の表示エリアを作る
次に、先ほどのウィジェットを複製して「税込み価格」を表示するエリアを作ります。
ただし、現段階では計算処理をまだ追加していないため、「税抜き」「税込み」ともに同じ金額が表示されます。
ステップ③：カスタムファンクションを作成
いよいよ、税込み価格を計算するためのカスタムファンクションを追加します。
- FlutterFlowの左メニューから「Custom Code」→「Custom Function」を選択
- 「Add Function」ボタンをクリック
- 関数名を入力
- 出力（Return Value）を
Integerに設定 - 入力（Arguments）として
price（整数型）を設定
ステップ④：コードを生成する
FlutterFlowには「コードコパイロット」があり、英語で説明文を入力するだけでDartコードを自動生成できます。
例えば、次のような英文を入力します：“Output a value that is 110% of the input value.”
これを実行すると、次のようなコードが自動生成されます。
生成されたら「Copy Function」を！
そのあとに「Save Function」をクリックして保存しましょう。
チェックマークが表示されたら、関数の定義は完了です。
ステップ⑤：カスタムファンクションを画面に反映する
作成した関数を、税込み価格の表示部分に適用します。
- 「税込み価格」テキストのデータソースを編集
Custom Function→ 作成したカスタムファンクションを選択- 引数（Argument）として「税抜き価格」を設定
これで、入力した値をもとに自動で税込み価格を計算してくれるようになります。
まとめ：カスタムファンクションでFlutterFlowをもっと自由に
今回の例では「消費税計算」というシンプルな処理を実装しましたが、
カスタムファンクションを使えば、日付フォーマット、文字列変換、配列操作などさまざまな応用が可能です。
FlutterFlowのカスタムファンクションを理解しておくと、
ノーコード開発の枠を超えた「セミコード」的な柔軟さが手に入ります。
