FlutterFlowで初めてのカスタムウィジェット！「こんにちは」と表示させるまでの道のり

今回は、AppTaletentHubDXBoostで質問があったFlutterFlowモニター研修の実施レポートです。
（6月に募集しており実施してますです。現在満員のため、9月に再開予定です）

ノーコード・ローコード開発ツールとして人気のFlutterFlowで、初めてカスタムウィジェットのやり方を行いました

目標はとてもシンプル。「こんにちは」と画面に表示するだけのウィジェットを作ることです。
一見簡単そうに見えましたが、カスタムウィジェット使うときのあるあるのエラーについても説明していきましょう。

今回は、以下のように、こんにちはと表示するウィジェットです。

カスタムウィジェットとは？

そもそもカスタムウィジェットとは、FlutterFlowに標準で用意されていない、自分だけのオリジナルコンポーネントをコード（Dart言語）で作成できる機能です。

これを使えば、デザインに凝った独自のUIパーツを作ったり、外部のライブラリを組み込んでグラフなども作れるものです。 まさに、ノーコードの手軽さとコードの自由度を両立させる、FlutterFlowの強力な機能と言えるでしょう。

 FlutterFlowカスタムウィジェット

Custom Widgets | FlutterFlow Documentation

Learn how to create and use custom widgets in your FlutterFlow app to enhance its user interface.

docs.flutterflow.io

 

FlutterFlow カスタムウィジェットの作成手順

この操作は、FlutterFlowでオリジナルのウィジェットを作成する基本的な流れを示しています。

1. ウィジェットの名前を入れる

まず、カスタムコードの画面を開き、新しいウィジェットを作成します。最初にウィジェットの名前を入れます。動画では「HelloWorldWidget」と命名しています。

2. コードを定義する

次に、ウィジェットの基本的なテンプレート（ボイラープレートコード）をエディタにコピーします。
これがウィジェットの雛形となり、このコードを編集して内容を定義していきます。

今回使ったコードは以下です。

// Automatic FlutterFlow imports
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'packagepackage:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

class HelloWorldWidget extends StatefulWidget {
  const HelloWorldWidget({
    super.key,
    this.width,
    this.height,
  });

  final double? width;
  final double? height;

  @override
  State<HelloWorldWidget> createState() => _HelloWorldWidgetState();
}

class _HelloWorldWidgetState extends State<HelloWorldWidget> {
  @override
  Widget build(BuildContext context) {
    // ContainerをCenterウィジェットで囲み、中央に配置
    return Center(
      child: Container(
        width: widget.width,
        height: widget.height,
        // Textウィジェットで「こんにちは」と表示
        child: const Text(
          'こんにちは',
          style: TextStyle(
            fontSize: 24, // フォントサイズを調整
            fontWeight: FontWeight.bold, // 太字にする
          ),
        ),
      ),
    );
  }
}

3. Geminiを使ってコードを生成・反映する

表示したい内容のカスタムコードを準備します。動画では、あらかじめGeminiにプロンプトを投げて生成したコードを、エディタに貼り付けています。 その後、画面右上にあるGeminiアイコンをクリックし、機能をアクティブにしています。

4. 保存ボタンを押す

最後に、画面右上にある保存ボタンを押して、作成したコードを保存します。ボタンを押すと、コードにエラーがないかをチェックする「Code analyzer」が実行され、問題がなければウィジェットの作成は完了です。

エラー

Compilation Error In test
Error: Method not found: 'HelloWorldWidget'.

「HelloWorldWidgetというウィジェットが見つかりません」というエラーです。
ウィジェットは確かに作成したはずなのに、なぜ…？
これは、ウィジェットの名前を間違えていたり、コードのコンパイルが正常に完了していなかったりすると発生する、初心者が陥りがちなエラーになります。

ウィジェットを表示しましょう

コードを修正し、再度テストモードを実行。成功すると、Custom Widgetsに定義したWidgetsがでてきます。

ついに、自作ウィジェットが「こんにちは」と画面に表示されました！
たったこれだけのことですが、エラーを乗り越えて自分のコードが形になった瞬間は、大きな達成感がありました。

まとめ

今回は、FlutterFlowのカスタムウィジェット機能を使って、簡単なテキスト表示に挑戦しました。エラーはつきものですが、全体の流れをつかんでおけば、あとは、トライアンドエラーで、かならず成功するはずです。

皆さんもぜひ、FlutterFlowで自分だけのカスタムウィジェット作成に挑戦してみてはいかがでしょうか。