如何在 Dart / Flutter pdf 库中使用 drawBox、drawEllipse 或 drawLine 方法

Question

I want to generate PDF files including self drawn graphics within a Flutter App. Of course with the pdf library provided it is quite simple to show a pdf preview containing for example two text lines, but i want to be able to insert some graphics that i want to draw myself, as i need to draw (myself)some very unconventional graphs. In order to do that i need to be able to draw within a pdf widget (some lines, curves, points, of several colors, etc...). As per now i didn't manage to even draw a point,,,. the pdf library of flutter dart describes dozens of methods. but doesn't show any example, that's a pitty in fact. Is there somebody who could help me in order to "draw" graphics within PDF Dart Flutter Object. The PdfLibrary includes PdfGraphics class that is supposed to have the methods i try tu use without success !!

Many thank's in advance

Please find my code:

import 'package:pdf/pdf.dart';
import 'package:pdf/widgets.dart' as pw;
import 'package:printing/printing.dart';

void main() => runApp(const MyApp('Ceci est mon premier PDF'));

class MyApp extends StatelessWidget {
  const MyApp(this.title);

  final String title;

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text(title)),
        body: PdfPreview(
          build: (format) => _generatePdf(format, title),
        ),
      ),
    );
  }

  Future<Uint8List> _generatePdf(PdfPageFormat format, String title) async {
    final pdf = pw.Document();

    pdf.addPage(
      pw.Page(
        pageFormat: format,
        build: (context) {
          return pw.Center(
            child: pw.Column (
              children: [
                pw.Text(title),
                pw.Text(title),
                //pw.drawBox(10,10,100,100),     <---- if i remove the comment the app 
                                                       crashes saying "Method not found" 
                                                       otherwise i have a PDF generated with two 
                                                       lines of text, and i want that just under a 
                                                       self drawn graphic could be displayed 

              ],
            ),
          );//pw.Text(title),

        },
      ),
    );

    return pdf.save();
  }
}

Answer 1

You have to use the CustomPaint class instead of just drawing directly.

Try

pw.CustomPaint(
  size: const PdfPoint(110, 110),
  painter: (PdfGraphics canvas, PdfPoint size) {
    canvas
      ..setColor(PdfColors.indigo)
      ..drawRect(10, 10, 100, 100)
      ..fillPath();
  },
);

instead of

pw.drawBox(10,10,100,100)

Check out the list of drawable shapes here: https://pub.dev/documentation/pdf/latest/pdf/PdfGraphics-class.html

---

For those looking for more information

(pdf's) CustomPaint expects a child and one or two painter functions. Unlike Flutter's CustomPaint

• this uses a PdfGraphics instead of a Canvas
• the painting functions are functions not CustomPainters

---

I struggled for days to figure this out and found my answer on this comment: https://github.com/DavBfr/dart_pdf/issues/145#issuecomment-530798498