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();
}
),
],
);
}
Last updated