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.
Before getting started with the Bold Report Viewer in Flutter, make sure your development environment includes the following:
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.
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.
Now, open Visual Studio Code and install Flutter and Dart in your application, as shown in the following snapshot.
Creating a Flutter project
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:
Then, you need to add the script and bold report viewer to index.html, located in the web folder.
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.
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.