BoldBI Embedding Flutter Sample

This project demonstrates how to embed a Bold BI dashboard in a Flutter web app with a simple nodejs backend.

Dashboard view

Requirements to run the demo

The samples require the following to run:

• VS Code
• Flutter SDK
• Node.js and npm
• Google Chrome (for Flutter web)

Configuration

• Please ensure you have enabled embed authentication on the embed settings page. If it is not currently enabled, please refer to the following image or detailed instructions to enable it.

  

• To download the embedConfig.json file, please follow this link for reference. Additionally, you can refer to the following image for visual guidance.

  

• Copy the downloaded embedConfig.json file and paste it into the designated location within the application. Please ensure you have placed it in the application, as shown in the following image.

  

Running the Express Backend

1. Open Project in VS Code
2. Navigate to backend nodejs folder and install dependencies.

    cd nodejs
    npm install

3. Start the server using the command below.

    node app.js

Note: The server will run on port 8080. If you want to change the port, you can do so in the app.js file.

Running the Flutter Web App

1. Open Project in VS Code
2. Navigate to the flutter folder and install dependencies.

    cd flutter-sample
    flutter pub get

3. Make sure you have web support enabled.

    flutter devices

4. Run the app using the command below to open it in Chrome.

    flutter run -d chrome

Please refer to the help documentation to know more about the steps and sample explanation.

Online Demos

Look at the Bold BI Embedding sample to live demo here.

Documentation

A complete Bold BI Embedding documentation can be found on Bold BI Embedding Help.