Nativebrik
Log in
  • はじめに
    • Nativebrikのメリット
    • 実現できるソリューション
    • SDKのインストール
      • iOS
      • Android
      • Flutter
    • クイックスタート
      • アカウントの発行
      • モーダルを表示する
      • アプリ内埋め込みを作成する
      • 🚧施策の効果を振り返る
      • 🚧ABテストを行う
  • リファレンス(開発者向け)
    • iOS
      • NativebrikClient
      • NativebrikProvider
      • NativebrikUser
      • NativebrikExperiment
      • RemoteConfigVariant
      • Phases
      • Events
    • Android
      • NativebrikClient
      • NativebrikProvider
      • NativebrikExperiment
    • Flutter
      • NativebrikBridge
      • NativebrikDispatcher
      • NativebrikProvider
      • NativebrikEmbedding
      • NativebrikRemoteConfig
      • NativebrikUser
      • NativebrikCrashReport
  • トラブルシューティング
Powered by GitBook
On this page
  • インターフェース
  • サンプルコード
  1. リファレンス(開発者向け)
  2. Flutter

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

Last updated 3 months ago