Articles in this section
Category / Section

How to Use the Bold Reports Report Viewer in a Flutter Application


Flutter, a popular cross-platform framework, allows developers to create beautiful and interactive mobile applications. However, when it comes to integrating reporting capabilities into a Flutter application, native support may be limited. Fortunately, with the help of the Bold Reports Report Viewer, we can seamlessly incorporate advanced reporting features into our Flutter projects. Flutter uses the Dart programming language, which is also developed by Google.

While the Bold Reports Report Viewer is primarily designed for JavaScript-based applications, leverage its powerful functionalities in a Flutter application by utiliizing an ASP.NET Core service as an intermediary. In this article, you will explore the process of integrating the JavaScript Report Viewer with an ASP.NET Core service and demonstrate how to use it effectively in a Flutter application.


Before getting started with the Bold Report Viewer in Flutter, make sure your development environment includes the following:

  1. First, download and extract the Flutter SDK file, and place it in the designated folder. For example, I have stored it in C:\src. Next, set the environment variable path by pressing Win + R and pasting the following command.

     rundll32.exe sysdm.cpl,EditEnvironmentVariables
  2. Copy the path of the bin folder, which is C:\src\flutter\bin, and paste it by clicking the “New” button, followed by the “OK” button.

  3. Now, open Visual Studio Code and install Flutter and Dart in your application, as shown in the following snapshot.


Creating a Flutter project

  1. Now, create a new folder named “Flutter” and then open a new terminal by clicking on “Terminal -> New Terminal”. Create a new sample project using the following command.

     flutter create project_name

    If you already have a new project, you need to run the following command:

     flutter pub get

    After creating the project, navigate to the project directory by running the following command: cd project_name.

  2. Then, you need to add the script and bold report viewer to index.html, located in the web folder.

  3. In the report_viewer.html file, you’ll need to include the necessary JavaScript code to create and configure the Bold Report Viewer. You can refer to the JavaScript documentation provided by Bold Reports for detailed instructions on displaying an SSRS RDL report in a JavaScript application: Javascript Report Viewer.

    In that documentation, you will find step-by-step instructions on how to include the required JavaScript files, create an instance of the Bold Report Viewer, and load and display an SSRS RDL report.

  4. The Report Viewer requires a Web API service to process the report files. You should create any one of the following Web API services to run this application.

    <!DOCTYPE html>
       <html xmlns="">
             <title>Report Viewer HTML page</title>
             <link href="" rel="stylesheet" />
             <script src=""></script>
             <!--Render the gauge item. Add this script only if your report contains the gauge report item. -->
             <script src=""></script>
             <script src=""></script>
             <script src=""></script>
             <script src=""></script>
             <script src=""></script>
             <script src=""></script>
             <!--Render the map item. Add this script only if your report contains the map report item.-->
             <script src=""></script>
             <!-- Report Viewer component script-->
             <script src=""></script>
             <script src=""></script>
             <!--Render the chart item. Add this script only if your report contains the chart report item.-->
             <script src=""></script>
             <script src=""></script>
             <script src="flutter.js" defer></script>
             <div style="height: 600px; width: 950px;">
                   <!-- Creating a div tag that will act as a container for the boldReportViewer widget.-->
                   <div style="height: 600px; width: 950px; min-height: 400px;" id="viewer"></div>
                   <!-- Setting property and initializing boldReportViewer widget.-->
                   <script type="text/javascript">
                      $(function () {
                               reportServiceUrl: "",
                               reportPath: '~/Resources/docs/sales-order-detail.rdl'
  5. Finally, run the command with the flutter run -d chrome to launch the application. The report will be rendered and displayed as shown in the following screenshot.

Was this article useful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied