NubrickEmbedding

埋め込みコンポーネント（Embedded Component）は、挿入する箇所をウィジェット内で直接指定する必要があります。

インターフェース

class NubrickEmbedding extends StatefulWidget {
  final String id;
  final double? width;
  final double? height;
  final dynamic arguments;
  final EventHandler? onEvent;
  final EmbeddingSizeHandler? onSizeChange;
  final EmbeddingBuilder? builder;
}

typedef EmbeddingSizeHandler = void Function(NubrickSize width, NubrickSize height);

sealed class NubrickSize {}
final class NubrickFixedSize extends NubrickSize { final double value; }
final class NubrickFillSize extends NubrickSize {}

サンプルコード

height も指定することを推奨しています。

import 'package:flutter/material.dart';
import 'package:nubrick_flutter/embedding.dart';

Widget build(BuildContext context) {
  return Column(
    children: [
      NubrickEmbedding("<EXPERIMENT_ID> or <EXPERIMENT_ID_ALIAS>", height: 200),
    ],
  );
}

onEvent

イベントハンドラを渡すことも可能です。

import 'package:flutter/material.dart';
import 'package:nubrick_flutter/embedding.dart';

Widget build(BuildContext context) {
  return Column(
    children: [
      NubrickEmbedding(
        "<EXPERIMENT_ID> or <EXPERIMENT_ID_ALIAS>",
        height: 200,
        onEvent: (event) {
          print("Nubrick Embedding Event: ${event.payload}");
        }
       ),
    ],
  );
}

onSizeChange

onSizeChange を使うと、埋め込みコンポーネントの実サイズを取得できます。 このコールバックは、実際の埋め込みページが読み込まれたときだけ呼ばれます。loading / notFound / failed では呼ばれません。

import 'package:flutter/material.dart';
import 'package:nubrick_flutter/embedding.dart';

Widget build(BuildContext context) {
  return Column(
    children: [
      NubrickEmbedding(
        "<EXPERIMENT_ID> or <EXPERIMENT_ID_ALIAS>",
        onSizeChange: (width, height) {
          print("width=$width, height=$height");
        },
      ),
    ],
  );
}

NubrickSize の意味:

• NubrickFixedSize(value) は、エディタで固定サイズが設定されていることを表します。

• NubrickFillSize() は、その軸に固定サイズがなく、ホスト側のレイアウトに従うことを表します。

arguments

argumentsとしてパラメータを渡すと、Component内で展開される動的な変数として利用することができます。

import 'package:flutter/material.dart';
import 'package:nubrick_flutter/embedding.dart';

Widget build(BuildContext context) {
  return Column(
    children: [
      NubrickEmbedding(
        "<EXPERIMENT_ID> or <EXPERIMENT_ID_ALIAS>",
        height: 200,
        arguments: {
          'item_id': itemId,
        },
      ),
    ],
  );
}

builder

loadingや、fallbackのハンドリングもカスタマイズすることができます。

import 'package:flutter/material.dart';
import 'package:nubrick_flutter/embedding.dart';

Widget build(BuildContext context) {
  return Column(
    children: [
      NubrickEmbedding(
        "<EXPERIMENT_ID> or <EXPERIMENT_ID_ALIAS>",
        builder: (context, phase, child) {
          case ExperimentPhase.loading:
            return const SizedBox(height: 200, child: Center(child: CircularProgressIndicator()));
          case ExperimentPhase.completed:
            return const SizedBox(height: 200, child: child);
          case ExperimentPhase.notFound:
            return const SizedBox(height: 200, child: Center(child: Text("Experiment not found.")));
          default:
            return const SizedBox.shrink();
        }
      ),
    ],
  );
}