Flutter의 PDF 생성 및 보기

PDF는 널리 사용되는 문서 형식으로, Flutter 애플리케이션에서도 다양한 용도로 활용할 수 있습니다. 이번 글에서는 Flutter에서 PDF 파일을 생성하고, 생성된 PDF 파일을 보는 방법을 구현하는 예제를 자세히 살펴보겠습니다.

1. PDF 생성 패키지 설치

Flutter 애플리케이션에서 PDF 파일을 생성하기 위해 pdf 패키지를, PDF 파일을 보기 위해 flutter_pdfview 패키지를 설치합니다. pubspec.yaml 파일에 다음 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  pdf: ^3.3.0
  path_provider: ^2.0.6
  flutter_pdfview: ^1.0.4

 

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

2. PDF 생성

PDF 파일을 생성하기 위해 pdf 패키지를 사용합니다. PDF 파일을 생성한 후 로컬 디렉토리에 저장합니다.

import 'package:flutter/material.dart';
import 'package:pdf/widgets.dart' as pw;
import 'package:path_provider/path_provider.dart';
import 'dart:io';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PDFGeneratorExample(),
    );
  }
}

class PDFGeneratorExample extends StatefulWidget {
  @override
  _PDFGeneratorExampleState createState() => _PDFGeneratorExampleState();
}

class _PDFGeneratorExampleState extends State<PDFGeneratorExample> {
  String pdfPath = '';

  Future<void> _generatePDF() async {
    final pdf = pw.Document();

    pdf.addPage(
      pw.Page(
        build: (pw.Context context) {
          return pw.Center(
            child: pw.Text('Hello, World!'),
          );
        },
      ),
    );

    final output = await getTemporaryDirectory();
    final file = File('${output.path}/example.pdf');
    await file.writeAsBytes(await pdf.save());

    setState(() {
      pdfPath = file.path;
    });

    print('PDF saved to ${file.path}');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('PDF Generator Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _generatePDF,
              child: Text('Generate PDF'),
            ),
            SizedBox(height: 20),
            pdfPath.isNotEmpty
                ? ElevatedButton(
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => PDFViewerScreen(pdfPath: pdfPath),
                        ),
                      );
                    },
                    child: Text('View PDF'),
                  )
                : Container(),
          ],
        ),
      ),
    );
  }
}

class PDFViewerScreen extends StatelessWidget {
  final String pdfPath;

  PDFViewerScreen({required this.pdfPath});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('PDF Viewer')),
      body: PDFView(
        filePath: pdfPath,
      ),
    );
  }
}

 

위 코드는 "Hello, World!"라는 텍스트가 포함된 PDF 파일을 생성하고, 이를 로컬 디렉토리에 저장하는 예제입니다. 사용자가 "Generate PDF" 버튼을 클릭하면 PDF 파일이 생성되고, "View PDF" 버튼을 클릭하면 PDF 파일을 볼 수 있습니다.

3. PDF 보기

생성된 PDF 파일을 보기 위해 flutter_pdfview 패키지를 사용합니다. PDFView 위젯을 사용하여 PDF 파일을 표시합니다.

import 'package:flutter/material.dart';
import 'package:flutter_pdfview/flutter_pdfview.dart';
import 'package:path_provider/path_provider.dart';
import 'package:pdf/widgets.dart' as pw;
import 'dart:io';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PDFGeneratorExample(),
    );
  }
}

class PDFGeneratorExample extends StatefulWidget {
  @override
  _PDFGeneratorExampleState createState() => _PDFGeneratorExampleState();
}

class _PDFGeneratorExampleState extends State<PDFGeneratorExample> {
  String pdfPath = '';

  Future<void> _generatePDF() async {
    final pdf = pw.Document();

    pdf.addPage(
      pw.Page(
        build: (pw.Context context) {
          return pw.Center(
            child: pw.Text('Hello, World!'),
          );
        },
      ),
    );

    final output = await getTemporaryDirectory();
    final file = File('${output.path}/example.pdf');
    await file.writeAsBytes(await pdf.save());

    setState(() {
      pdfPath = file.path;
    });

    print('PDF saved to ${file.path}');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('PDF Generator Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _generatePDF,
              child: Text('Generate PDF'),
            ),
            SizedBox(height: 20),
            pdfPath.isNotEmpty
                ? ElevatedButton(
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => PDFViewerScreen(pdfPath: pdfPath),
                        ),
                      );
                    },
                    child: Text('View PDF'),
                  )
                : Container(),
          ],
        ),
      ),
    );
  }
}

class PDFViewerScreen extends StatelessWidget {
  final String pdfPath;

  PDFViewerScreen({required this.pdfPath});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('PDF Viewer')),
      body: PDFView(
        filePath: pdfPath,
      ),
    );
  }
}

 

위 코드는 PDF 파일을 생성하고, 생성된 PDF 파일을 보기 위해 flutter_pdfview 패키지를 사용하는 예제입니다. PDF 파일이 생성된 후 "View PDF" 버튼을 클릭하면 PDF 파일을 볼 수 있는 화면으로 이동합니다.

 

 

반응형

 

 

 

4. PDF 내용 확장

PDF 파일에 더 복잡한 내용을 추가할 수 있습니다. 예를 들어, 이미지, 테이블, 리스트 등을 추가할 수 있습니다.

 

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:pdf/pdf.dart';
import 'package:pdf/widgets.dart' as pw;
import 'package:path_provider/path_provider.dart';
import 'dart:io';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PDFGeneratorExample(),
    );
  }
}

class PDFGeneratorExample extends StatefulWidget {
  @override
  _PDFGeneratorExampleState createState() => _PDFGeneratorExampleState();
}

class _PDFGeneratorExampleState extends State<PDFGeneratorExample> {
  String pdfPath = '';

  Future<void> _generatePDF() async {
    final pdf = pw.Document();

    final image = (await rootBundle.load('assets/sample_image.png')).buffer.asUint8List();

    pdf.addPage(
      pw.Page(
        build: (pw.Context context) {
          return pw.Column(
            children: [
              pw.Text('Hello, World!', style: pw.TextStyle(fontSize: 40)),
              pw.SizedBox(height: 20),
              pw.Image(pw.MemoryImage(image), width: 200, height: 200),
              pw.SizedBox(height: 20),
              pw.Table.fromTextArray(
                context: context,
                data: <List<String>>[
                  <String>['Header 1', 'Header 2', 'Header 3'],
                  <String>['Row 1 Col 1', 'Row 1 Col 2', 'Row 1 Col 3'],
                  <String>['Row 2 Col 1', 'Row 2 Col 2', 'Row 2 Col 3'],
                ],
              ),
            ],
          );
        },
      ),
    );

    final output = await getTemporaryDirectory();
    final file = File('${output.path}/example.pdf');
    await file.writeAsBytes(await pdf.save());

    setState(() {
      pdfPath = file.path;
    });

    print('PDF saved to ${file.path}');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('PDF Generator Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _generatePDF,
              child: Text('Generate PDF'),
            ),
            SizedBox(height: 20),
            pdfPath.isNotEmpty
                ? ElevatedButton(
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => PDFViewerScreen(pdfPath: pdfPath),
                        ),
                      );
                    },
                    child: Text('View PDF'),
                  )
                : Container(),
          ],
        ),
      ),
    );
  }
}

class PDFViewerScreen extends StatelessWidget {
  final String pdfPath;

  PDFViewerScreen({required this.pdfPath});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('PDF Viewer')),
      body: PDFView(
        filePath: pdfPath,
      ),
    );
  }
}

 

 

위 코드는 PDF 파일에 텍스트, 이미지, 테이블을 추가하는 예제입니다. rootBundle.load를 사용하여 이미지 파일을 로드하고, pw.Image를 사용하여 PDF에 이미지를 추가합니다. 또한, pw.Table.fromTextArray를 사용하여 테이블을 추가할 수 있습니다.

결론

Flutter 애플리케이션에서 PDF 파일을 생성하고 보는 기능은 다양한 용도로 활용될 수 있습니다. pdf 패키지를 사용하여 PDF 파일을 생성하고, flutter_pdfview 패키지를 사용하여 PDF 파일을 보는 방법을 통해 PDF 기능을 구현할 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 PDF를 효율적으로 사용해보세요. PDF 기능을 통해 애플리케이션의 기능을 확장하고, 사용자 경험을 향상시킬 수 있습니다.