How to open a PDF file in flutter

<p>Flutter supports opening and viewing PDF files inside your apps through URLs, assets & local storage. font-size: 1rem;](</p> <p>font-size: 1rem;](In this tutorial, we are going to see how we can launch pdf files in a flutter app using a package called **font-size: 1rem;](flutter_plugin_pdf_viewer. **</p> <p>font-size: 1rem;](</p> <p>font-size: 1rem;](This package can also be used to load & view pdf files from the local storage.</p> <p>Let's have a look at the illustration before we dive into the code.</p> <p>![](../../../Uploads/0bf3cee2-4e4d-4ee7-a926-c0e37e037c80.gifwidth="50%height="auto](</p> <p><strong>STEPS TO FOLLOW</strong></p> <ul> <li>To begin with, add the package dependency as follows in your pubspec.yaml file.</li> </ul> <p><code> </code></p> <p><code> </code></p> <p><code> </code></p> <ul> <li><p>Create a new folder named assets and add a pdf file to this folder. The file should be named "sample.pdf</p> </li> <li><p>Add the assets path to the pubspec.yaml file.</p> </li> <li><p>Paste the following code inside your main.dart file. An explanation for the same is provided below the code.</p> </li> </ul> <p>runApp(MyApp());</p> <p>class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'PDFViewer Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'PDFViewer Demo'), ); } }</p> <p>class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title;</p> <p>@override _MyHomePageState createState() => _MyHomePageState(); }</p> <p>class _MyHomePageState extends State { bool _isLoading = true; PDFDocument doc;</p> <p _isLoading="true;">void _loadFromAssets() async { setState(() ); doc = await PDFDocument.fromAsset('assets/sample.pdf'); setState(() ); }</p> <p _isLoading="true;">void _loadFromUrl() async { setState(() ); doc = await PDFDocument.fromURL( 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf'); setState(() ); }</p> <p>@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Flexible( flex: 8, child: _isLoading ? CircularProgressIndicator() : PDFViewer( document: doc, ), ), Flexible( flex: 2, child: Padding( padding: const EdgeInsets.all(8.0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ RaisedButton( color: Colors.blue, child: Text( 'Load From Assets', style: TextStyle(color: Colors.white), ), onPressed: _loadFromAssets, ), RaisedButton( color: Colors.blue, child: Text( 'Load From URL', style: TextStyle(color: Colors.white), ), onPressed: _loadFromUrl, ),</p> <pre> ], ), ), ), ], ), ), ); </pre> <p>} }</p> <p><strong>Code Overview:</strong></p> <p>We add two **RaisedButton **which are responsible for triggering two different methods _loadFromAssets & _loadFromUrl. Each of these methods updates the value fo doc variable of type <strong>PDFDocument</strong> which is actually rendered to the screen of the app.</p> <p>Do comment below if you have any doubts or questions. Happy Fluttering :)</p>