# NubrickEmbedding

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

### インターフェース

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

### サンプルコード

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

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