[flutter] PDF 파일 뷰어 만들기(pdfx, internet_file 를 이용)

URL 을 이용해서 PDF 뷰어 기능 추가

 

파일을 직접 저장해서 여는 방식이 아니고 서버에서 제공해준 API를 이용해서 보여줘야했습니다.

 

실제 API 를 적을수 없으니 샘플 URL 을 이용해서 작성하였습니다.

 

샘플 pdf URL :

https://upload.wikimedia.org/wikipedia/commons/8/85/I-20-sample.pdf

pdf 뷰어를 제작할 때 사용한 라이브러리는 pdfx 와 internet_file 입니다.

 

 

적용 방법

1. pubspec.yaml 파일에 라이브러리 추가

dependencies:
  ...
  pdfx: ^2.3.0
  internet_file: ^1.2.0

 

2. 화면 생성 및 기능 추가

import 'package:dangi/screens/defaultLayout/default_layout_mobile.dart';
import 'package:flutter/material.dart';
import 'package:internet_file/internet_file.dart';
import 'package:pdfx/pdfx.dart';

class PdfTest extends StatefulWidget {
  const PdfTest({Key? key}) : super(key: key);

  @override
  State<PdfTest> createState() => _PdfTestState();
}

class _PdfTestState extends State<PdfTest> {
  final int initialPage = 1;
  late PdfController pdfController;

  @override
  void initState() {
    super.initState();
    pdfController = PdfController(
        document: PdfDocument.openData(
          InternetFile.get('https://upload.wikimedia.org/wikipedia/commons/8/85/I-20-sample.pdf')
        ),
        initialPage: initialPage
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return MobileDefaultLayout(
      title: 'pdf 테스트',
      child: Stack(
        children: [
          PdfView(
            builders: PdfViewBuilders<DefaultBuilderOptions>(
              options: const DefaultBuilderOptions(),
              documentLoaderBuilder: (_) =>
              const Center(child: CircularProgressIndicator()),
              pageLoaderBuilder: (_) =>
              const Center(child: CircularProgressIndicator()),
            ),
            controller: pdfController,
          ),
          IntrinsicHeight( // Row 내에서 가장 높은 높이를 가진 크기만큼 모두 갖게 됨
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                IconButton(
                  icon: const Icon(Icons.navigate_before),
                  onPressed: () {
                    pdfController.previousPage(
                      curve: Curves.ease,
                      duration: const Duration(milliseconds: 100),
                    );
                  },
                ),
                Center(
                  child: PdfPageNumber(
                    controller: pdfController,
                    builder: (_, loadingState, page, pagesCount) => Container(
                      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),
                    );
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

 

3. 결과 화면

1페이지

4페이지

6페이지

 

에뮬레이터 또는 시뮬레이터에서는 화살표를 눌러서 페이지 이동 가능하고

실제 기기에서는 화살표 또는 스와이프로 페이지 이동할 수 있습니다.

 

이상 간단하게 pdf 뷰어 만드는 방법을 정리해봤습니다.