How to show a specific page of a PDF file

I am working on requirement to show a specific page of a pdf file. Pdf need to be fetched from a url. In my case supabase.

any idea how to do this.

I have tried using custom widget but till now there is no success.

Widget is throwing Exception: unknown error. ( I am new to flutterflow so i have no clue what that is about.)

I suspect that the problem is with viewing pdf on web. I am using pdfx package - https://pub.dev/packages/pdfx

In documentation it says - for we run toll for automatically add pdfjs library (CDN in index.html

flutter pub run pdfx:install_web

Not sure how to do that for flutterflow.

here is the custom code which i am using.

// Automatic FlutterFlow imports
import '/backend/supabase/supabase.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:pdfx/pdfx.dart';
import 'package:internet_file/internet_file.dart';

class Mypdfview extends StatefulWidget {
  const Mypdfview({
    super.key,
    this.width,
    this.height,
  });

  final double? width;
  final double? height;

  @override
  State<Mypdfview> createState() => _MypdfviewState();
}

class _MypdfviewState extends State<Mypdfview> {
  static const int _initialPage = 1;
  late PdfController _pdfController;

  @override
  void initState() {
    super.initState();
    _pdfController = PdfController(
      document: PdfDocument.openData(
          InternetFile.get('https://www.pdf995.com/samples/pdf.pdf')),
      initialPage: _initialPage,
    );
  }

  @override
  void dispose() {
    _pdfController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: widget.width,
      height: widget.height,
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              IconButton(
                icon: const Icon(Icons.navigate_before),
                onPressed: () {
                  _pdfController.previousPage(
                    curve: Curves.ease,
                    duration: const Duration(milliseconds: 100),
                  );
                },
              ),
              PdfPageNumber(
                controller: _pdfController,
                builder: (_, loadingState, page, pagesCount) => Container(
                  alignment: Alignment.center,
                  child: Text(
                    '$page/${pagesCount ?? 0}',
                    style: const TextStyle(fontSize: 22),
                  ),
                ),
              ),
              IconButton(
                icon: const Icon(Icons.navigate_next),
                onPressed: () {
                  _pdfController.nextPage(
                    curve: Curves.ease,
                    duration: const Duration(milliseconds: 100),
                  );
                },
              ),
            ],
          ),
          Expanded(
            child: PdfView(
              builders: PdfViewBuilders<DefaultBuilderOptions>(
                options: const DefaultBuilderOptions(),
                documentLoaderBuilder: (_) =>
                    const Center(child: CircularProgressIndicator()),
                pageLoaderBuilder: (_) =>
                    const Center(child: CircularProgressIndicator()),
              ),
              controller: _pdfController,
            ),
          ),
        ],
      ),
    );
  }
}