How to load a PDF document from firebase storage in Syncfusion Flutter PdfViewer?
This article explains how to load a PDF document from firebase storage in the Syncfusion® Flutter PDF Viewer.
The Syncfusion® Flutter PDF Viewer widget provides the support to load a PDF document from the Firebase storage. Follow these steps to load the PDF document on the web.
Step 1: Add the firebase storage dependency in the pubspec.yaml file.
dependencies: syncfusion_flutter_pdfviewer: ^20.2.45-beta firebase_storage: ^10.2.9
Step 2: Import the following depedencies in your main.dart.
import 'package:firebase_storage/firebase_storage.dart' as firebase_storage; import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';
Step 3: In the web/index.html file, add the following scripts to add the firebase storage SDKs and initialize the firebase.
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-analytics.js"></script>
<script>
var firebaseConfig = {
apiKey: "AIzaSyD3kd5vMAOxwPdQiU1pTpoWrGZr9ZzuU-g",
projectId: "flutter-web-app-edc4a",
storageBucket: "flutter-web-app-edc4a.appspot.com",
appId: "1:593342140687:web:6f2d86d0b9aa628bbd6e7a",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
Step 4: Create a JSON file(cors.json) in your application directory path that contains the following for configuring the CORS on your bucket.
[
{
"origin": ["*"],
"method": ["GET"],
"maxAgeSeconds": 3600
}
]
The following code explains loading a PDF document from the firebase storage in the Syncfusion® Flutter PDFViewer. The getPdfBytes( ) method is used to convert the Firebase storage PDF document as bytes and then load the bytes by using the SfPdfViewer.memory, which is used to load a PDF document from memory or bytes.
Uint8List? _documentBytes;
String path =
'https://firebasestorage.googleapis.com/v0/b/flutterfirebase-6c279.appspot.com/o/GIS.pdf?alt=media&token=51654170-c140-4ffa-ae1a-9fb431d0dee2';
@override
void initState() {
getPdfBytes();
super.initState();
}
void getPdfBytes() async {
if (kIsWeb) {
firebase_storage.Reference pdfRef =
firebase_storage.FirebaseStorage.instanceFor(
bucket: 'flutter-web-app-edc4a.appspot.com')
.refFromURL(path);
//size mentioned here is max size to download from firebase.
await pdfRef.getData(104857600).then((value) {
_documentBytes = value;
setState(() {});
});
} else {
HttpClient client = HttpClient();
final Uri url = Uri.base.resolve(path);
final HttpClientRequest request = await client.getUrl(url);
final HttpClientResponse response = await request.close();
_documentBytes = await consolidateHttpClientResponseBytes(response);
setState(() {});
}
}
@override
Widget build(BuildContext context) {
Widget child = const Center(child: CircularProgressIndicator());
if (_documentBytes != null) {
child = SfPdfViewer.memory(
_documentBytes!,
);
}
return Scaffold(
appBar: AppBar(title: const Text('Syncfusion Flutter PDF Viewer')),
body: child,
);
}
A complete working sample can be downloaded from this link.
