Contents
FlutterFlow のビジュアルエディタ概要と実務上の制約
FlutterFlow はドラッグ＆ドロップで UI を構築できるノーコードプラットフォームです。プロトタイピングや MVP（Minimum Viable Product）の作成には非常に高速ですが、実務レベルのアプリではいくつかの壁が見えてきます。本セクションではエディタの基本操作と、開発現場で直面しやすい制約を整理します。
基本操作フロー
ビジュアルエディタで最も頻繁に行う作業は次の手順です。まずは全体像を把握した上で、各ステップを実際に試してみましょう。
- プロジェクト作成 – テンプレート選択または空白から開始します。
- ページ追加 – 「Add Page」ボタンで画面を増やし、ナビゲーション構造を整えます。
- ウィジェット配置 – パレットからドラッグしてレイアウトツリーへドロップします。
- プロパティ編集 – 右側のパネルでサイズ・色・マージンなどを細かく調整できます。
- プレビュー実行 – 「Run」ボタンでリアルタイムに UI を確認し、必要なら修正します。
制約事項
ビジュアルエディタだけでは対応できないケースがいくつかあります。以下は特に注意すべきポイントです。
-
カスタム描画の不可
標準ウィジェット（Container,Imageなど）では実現できない独自形状や特殊エフェクトは作成できません。 -
高度なロジックが不足
条件分岐や外部 API 呼び出しは、専用の「Custom Action」やコード埋め込みが必要です。 -
アニメーション制御の限定
シンプルな遷移は設定できますが、ステートマシンを伴う複雑なタイミング調整は手書きコードが望ましいです。
結論：FlutterFlow のビジュアルエディタは高速プロトタイプに最適ですが、実務で高度な UI を求める場合はコードレベルの拡張が不可欠です。
カスタムロジックで拡張する方法
エディタだけでは足りない機能を補う手段として「Custom Action」と「Custom Widget」の2つがあります。本節ではそれぞれの作成手順と実装上の留意点を具体的に解説します。
Custom Action の作成手順
Custom Action は UI から呼び出せる任意の Dart 関数です。非同期処理や外部サービス連携が必要な場面で有効です。
まずはプロジェクト内の 左メニュー > Custom Functions を開きます。続いて「+ Add Function」をクリックし、関数名と戻り値型を入力してください。その後に表示されるエディタに Dart コードを書き込み、保存します。完成した関数は Add to Page から対象ウィジェットのアクションリストに登録できます。
|
1 2 3 4 5 6 7 8 |
Future<String> fetchUserName(String uid) async { final doc = await FirebaseFirestore.instance .collection('users') .doc(uid) .get(); return doc.data()?['name'] ?? 'Guest'; } |
実装上のポイント
- 非同期関数は必ず
Futureを返すようにし、エラーハンドリングを忘れないこと。 - 関数名はプロジェクト全体で一意になるよう命名規則（例：
fetchUserName）を策定すると管理が楽です。
Custom Widget の作成手順
Custom Widget は標準パレットに無い独自コンポーネントを再利用可能な形で組み込む手段です。
- 左メニュー > Custom Widgets を選択し、 「+ Create Widget」 →「Blank Dart File」をクリック。
- 生成されたテンプレートに
StatelessWidgetまたはStatefulWidgetを実装します。以下はグラデーションボタンの例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
class GradientButton extends StatelessWidget { final String label; final VoidCallback onPressed; const GradientButton({ required this.label, required this.onPressed, Key? key, }) : super(key: key); @override Widget build(BuildContext context) { return GestureDetector( onTap: onPressed, child: Container( padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24), decoration: BoxDecoration( gradient: const LinearGradient(colors: [Colors.blue, Colors.purple]), borderRadius: BorderRadius.circular(8), ), child: Text(label, style: const TextStyle(color: Colors.white)), ), ); } } |
- 保存後、Widget Tree の「+ Add Custom Widget」から画面上に配置し、プロパティ（
label,onPressed）を UI パネルで設定します。
実装上のポイント
- 必要最小限のインポートだけを残すことでビルドサイズが抑えられます。
- 再利用性を高めるために、パラメータはできるだけ汎用的に設計しましょう（例：色やサイズもプロパティ化）。
デザイン資産との連携：Figma からのインポート
デザイナーが作成した Figma ファイルをそのまま FlutterFlow に持ち込むことで、デザインと実装の齟齬を最小限に抑えられます。ここでは推奨されるフローと、よくあるトラブルへの対処法を紹介します。
Figma 側設定
Figma でインポート対象となるコンポーネントは以下の基準で整理してください。
- フレームまたはコンポーネントとしてまとめ、名前は英数字とアンダースコア（例：primary_button）に統一する。
- エクスポート形式は PNG／SVG のいずれかを有効化し、ベクターデータが必要な場合は SVG を選択すると品質が保たれます。
FlutterFlow 側インポート手順
- プロジェクト画面左上の Figma Sync ボタンをクリック。
- Figma の API トークンと対象ファイル URL を入力し、Connect → Import Components を実行します。
- インポートが完了すると、コンポーネントは自動的に Custom Widgets に登録されます。以降はビジュアルエディタ上で通常のウィジェットと同様に配置可能です。
同期自動化とトラブルシューティング
-
自動同期の有効化
「Settings > Sync Settings」から「Auto‑Sync on Publish」をオンにすると、Figma 側で更新があった場合に数分以内に FlutterFlow に反映されます。 -
よくある課題と対策
- 名前重複：同名コンポーネントは上書きされるため、プロジェクト全体で一意な命名規則を徹底してください。
- レイヤー崩れ：Figma の「Flatten」や「Group」設定が不適切だとサイズが変わります。インポート前に必ずプレビューで確認しましょう。
高度な UI 実装：アニメーション、ステートマシン、レスポンシブデザイン
ビジュアルエディタだけでは実現しづらいインタラクションや多様な画面サイズへの対応は、FlutterFlow が提供する トリガー＋ステートマシン と テーマ変数 を組み合わせることで解決できます。
ステートマシンとトリガー
ステートマシンは UI の状態遷移を視覚的に管理できる機能です。たとえば「ボタンタップ → ローディングスピナー → 成功メッセージ」の流れは以下の手順で構築できます。
- ボタンウィジェットを選択し Add Trigger → On Tap を設定。
- 「Create State Machine」をクリックし、
idle → loading → success → errorの 4 状態を作成。 - 各状態に表示するウィジェットやアニメーション（FadeIn・SlideUp）を割り当て、
loading時は先ほど作成した Custom Action を呼び出すよう設定します。
この構成によりコードを書かずに複雑なフローが実装でき、保守性も向上します。
テーマ変数によるレスポンシブ対応
FlutterFlow の Theme 機能は全ページで共通のカラーやテキストスタイルを管理できます。さらに Media Query と組み合わせて画面幅に応じた値を切り替えることが可能です。
| 画面幅 | 使用するテーマ変数例 |
|---|---|
| < 600 px | primaryColor = Colors.blue |
| 600‑1024 px | primaryColor = Colors.indigo |
| > 1024 px | primaryColor = Colors.deepPurple |
- Theme > Add Variable で
primaryColorを作成し、デフォルト色を設定します。 - 各ウィジェットの「Color」プロパティに
${theme.primaryColor}と記述。 - 「Responsive Settings」から幅ごとの変数上書きを UI 上で指定できるため、コードを書かずにレスポンシブが完成します。
アニメーション実装のポイント
- Lottie：外部 JSON アニメーションは「Custom Widget」経由で簡単に埋め込めます。
- 遅延表示：
FutureBuilderを組み合わせた Custom Action で要素の遅延描画が可能です。 - パフォーマンス留意点：同時に多数のアニメーションを走らせないようにし、不要な
TickerProviderは削除します。
パフォーマンス最適化とコードエクスポート後の作業
FlutterFlow からエクスポートした Flutter プロジェクトはそのままビルドできますが、サイズや実行速度を改善する余地があります。ここでは具体的な削減テクニックと、CI/CD に組み込むテストフローを示します。
ビルドサイズ削減テクニック
Flutter のツリーシェイキング機能は未使用コードを除去しますが、FlutterFlow が自動生成した pubspec.yaml には不要なパッケージが残りやすいです。次の手順で約 10 %〜20 % 程度のサイズ削減が期待できます（公式ドキュメントでも同様の効果が報告されています）。
pubspec.yamlのdependenciesから実際に使用していないパッケージ（例：cupertino_icons）を除去。- カスタムウィジェットで必要なインポートだけを残し、
import 'package:flutter/material.dart';以外は削除します。 - ビルド時に ABI 別ビルド を有効化する
bash
flutter build apk --release --split-per-abi
これによりデバイスごとに最適化された APK が生成され、全体容量が減少します。
テスト・CI/CD の流れ
コードエクスポート後は自動テストを導入して品質を担保しましょう。
| フェーズ | 主な実施内容 |
|---|---|
| Widget Test | test/widget_test.dart に UI コンポーネントの期待結果を書き、flutter test で高速に検証。 |
| Integration Test | 実デバイス上でシナリオ駆動テストを実施（FlutterFlow が生成した integration_test/ ディレクトリ活用）。 |
| CI パイプライン | GitHub Actions などで flutter pub get → flutter test → flutter build apk --release を自動化。 |
このサイクルを Pull Request 時に走らせることで、機能追加時の不具合やビルドサイズの変動を早期に検知できます。
まとめ
- ビジュアルエディタは高速プロトタイプ作成に最適だが、カスタム描画・高度ロジック・詳細アニメーションは別途実装が必要。
- Custom Action / Custom Widget を活用すれば、Dart コードを直接組み込み汎用関数や独自コンポーネントを実現できる。
- Figma 連携は命名規則と自動同期設定でデザイン変更を即座に反映させ、開発効率を大幅に向上させる。
- ステートマシン・テーマ変数 による高度なインタラクションとレスポンシブ対応は、コードを書かずに実装できる強力な手段である。
- パフォーマンス最適化は不要パッケージ除去や ABI 別ビルドでサイズを 10 %〜20 % 程度削減可能。テストと CI/CD を組み合わせれば品質も安定します。
これらのポイントを体系的に活用すれば、FlutterFlow のノーコード開発スピードと、手書き Flutter コードが持つ柔軟性・パフォーマンスの両方を享受でき、実務レベルの高品質アプリケーションを効率的に構築できます。