# NubrickEmbedding

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

### インターフェース

```dart
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` も指定することを推奨しています。

```dart
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

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

```dart
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` では呼ばれません。

```dart
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内で展開される動的な変数として利用することができます。

```dart
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のハンドリングもカスタマイズすることができます。

```dart
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();
        }
      ),
    ],
  );
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.nubrick.app/reference/flutter/nubrickembedding.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.