NativebrikEmbedding

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

インターフェース

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

サンプルコード

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

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

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

onEvent

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

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

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

arguments

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

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

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

builder

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

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

Widget build(BuildContext context) {
  return Column(
    children: [
      NativebrikEmbedding(
        "<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();
        }
      ),
    ],
  );
}