Como criar, visualizar e compartilhar PDF em Flutter?!

Por que resolvi escrever este post

Eai galera DEV, tudo certo?

Vim aqui publicar mais um post pra poder estar contribuindo para nossa comunidade dev e adquirindo conhecimento. Esse é meu segundo post sobre Flutter, sempre que eu aprender alguma coisa nova eu quero compartilhar com vocês.

Dessa vez eu tive que implementar um gerador de PDF no meu aplicativo, e como sempre, eu não achei muita coisa em pt-br. Na real eu não achei nada sobre o tema, então resolvi fazer um código de exemplo que subi no GitHub e um post para explicar certinho como fazer.

Bibliotecas utilizadas

Você vai precisar importar essas bibliotecas no seu pubspec.yaml

Essas versões sempre são atualizadas, por isso vou deixar os links delas no final do post. Assim você pode instalar a versão mais recente.

Criar um PDF

Para criar um PDF em flutter eu utilizei a biblioteca chamada pdf.

A seguir a função responsável por criar o arquivo em PDF. Nessa função eu passei os atributos separados por parametros, mas seria interessante ser uma lista ou até mesmo um objeto.
O código funciona basicamente assim, eu instanciei um Document e depois adicionei uma pagina nele. E criei uma tabela com meus atributos.

Depois eu tive que pegar o diretório raiz da aplicação, criei um nome pro meu arquivo temporário e concatenei ele com o diretório raiz. Criado esse caminho, eu preciso salvar o pdf nessa caminho que criei para conseguir acessá-lo a seguir no próximo tópico.



  _creatPdf(contex, name, lastName, year) async {
    final pdfLib.Document pdf = pdfLib.Document(deflate: zlib.encode);

    pdf.addPage(pdfLib.MultiPage(
        build: (context) => [
              pdfLib.Table.fromTextArray(data: <List<String>>[
                <String>['Nome', 'Sobrenome', 'Idade'],
                [name, lastName, year]
              ])
            ]));

    final String dir = (await getApplicationDocumentsDirectory()).path;

    final String path = '$dir/pdfExample.pdf';
    final File file = File(path);
    file.writeAsBytesSync(pdf.save());
  }

Visualizar um PDF

Para estar visualizando um PDF eu utilizei a biblioteca advance_pdf_viewer.

Aquele caminho que a gente criou no tópico anterior, vamos estar utilizando para abrir nosso PDF.

No initState vamos chamar a função responsável por buscar nosso arquivo e atribuir a nossa variavel _doc.



 @override
  void initState() {
    super.initState();
    _initPdf();
  }

  _initPdf() async {
    setState(() {
      _loading = true;
    });
    final doc = await PDFDocument.fromAsset(widget.path);
    setState(() {
      _doc = doc;
      _loading = false;
    });
  }

Agora temos o arquivo para estar passando pro widget PDFViewer, que ele já vai fazer todo o trabalho de abrir e mostrar o arquivo no corpo do seu Scaffold.



  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: _loading
            ? Center(
                child: CircularProgressIndicator(),
              )
            : PDFViewer(document: _doc));
  }

Compartilhar PDF

A biblioteca utilizada foi a share_extend, que basicamente você vai executar a função share, passar o caminho e o tipo do arquivo.
Eu chamei essa função no icone de compartilhamento dentro do meu appBar, é somente você colocá-lo no seu Scaffold.



AppBar(
          title: Text('Flutter PDF'),
          actions: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: IconButton(
                  icon: Icon(
                    Icons.share,
                    color: Colors.white,
                  ),
                  iconSize: 30,
                  onPressed: () {
                    ShareExtend.share(widget.path, "file",
                        sharePanelTitle: "Enviar PDF", subject: "example-pdf");
                  }),
            )
          ],
        ),

Mas espera aí....

Isso vai dar um erro! E porque?

Por que você tem que dar permissão para abrir esse arquivo.

No seu arquivo: AndroidManifest.xml coloque essas permissões:



<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

Prontinho, tai o resultado!!!

Conclusão

Espero que esse post tenha te ajudado, eu consegui aprender bastante coisa nessa pesquisa que fiz. Vou deixar alguns links que foram de grande ajuda para mim.

Ah, se quiser dar alguma dica de como fazer melhor pode ficar a vontade a deixar nos comentários. E se você curtiu também!

Será um grande prazer ter seu feedback!

Valeu!!!