How to Create PDF Files in Flutter
This article explains you how to create and display PDF files in flutter applications using pdf and flutter_full_pdf_viewer packages. We already implemented PDF viewer in flutter application.
In this flutter example, we are creating pdf from our football player info data. Then we will display this created pdf in flutter application using Table widget. We can also customize this pdf according to our requirement. Before display pdf in flutter, we need to store this pdf using path_provider package.
Add libraries in pubspec.yaml file
First we need to add below flutter packages in our pubspec.yaml file.
flutter_full_pdf_viewer: ^1.0.6
path_provider: ^2.0.4
Home Screen UI
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Create PDF’)),
body: Center(
child: ElevatedButton(
style: ElevatedButton.styleFrom(
padding: EdgeInsets.symmetric(horizontal: 25, vertical: 15),
primary: Colors.orangeAccent
),
child: Text(‘Create PDF’, style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold)),
onPressed: () {
createPDFFromData(context);
},
),
));
}
}
How to Create PDF files in Flutter App
final Document pdf = Document();
pdf.addPage(
Page(
orientation: PageOrientation.natural,
build: (context) => Column(
children: [
Container(
color: PdfColors.white,
child: Table(
border: TableBorder.all(color: PdfColors.black),
children: [
tableRow(
[“No.”, “Name”, “Club”, “Country”], headerTextStyle()),
tableRow([“1”, “Ronaldo”, “Man United”, “Portugal”], dataTextStyle()),
tableRow([“2”, “Messi”, “PSG”, “Argentina”], dataTextStyle()),
tableRow([“3”, “Neymar”, “PSG”, “Brazil”], dataTextStyle()),
tableRow([“4”, “De Bruyne”, “Man City”, “Brazil”], dataTextStyle()),
tableRow([“5”, “Mbappe”, “PSG”, “France”], dataTextStyle()),
tableRow([“6”, “Lukaku”, “Chelsea”, “Belgium”], dataTextStyle()),
tableRow([“7”, “Salah”, “Liverpool”, “Egypt”], dataTextStyle()),
tableRow([“8”, “Kane”, “Tottenham”, “England”], dataTextStyle()),
tableRow([“9”, “Benzema”, “Real Madrid”, “France”], dataTextStyle()),
tableRow([“10”, “Haaland”, “Dortmund”, “Norway”], dataTextStyle()),
],
),
),
],
),
),
);
}
return TableRow(
children: attributes
.map(
(e) => Text(
” ” + e,
style: textStyle,
),
)
.toList(),
);
}
return TextStyle(
color: PdfColors.blueGrey500,
fontSize: 26,
fontWeight: FontWeight.bold,
);
}
return TextStyle(
color: PdfColors.blueGrey900,
fontSize: 26,
);
}
Store PDF Files
String filePath = ‘$dirPath/playerInfo.pdf’;
File file = File(filePath);
await file.writeAsBytes((await pdf.save()));
material.Navigator.of(context).push(
material.MaterialPageRoute(
builder: (_) => MyPDFViewer(filePath),
),
);
Display PDF Files in Flutter App
import ‘package:flutter_full_pdf_viewer/full_pdf_viewer_scaffold.dart’;
class MyPDFViewer extends StatelessWidget {
String pdfPath;
MyPDFViewer(this.pdfPath);
@override
Widget build(BuildContext context) {
return PDFViewerScaffold(
path: pdfPath,
);
}
}
