How to make PDF Reader app in Flutter with Source Code Step by step

Creating a PDF Reader app in Flutter involves setting up your project, adding necessary dependencies, writing the code, and testing the app. Below is a step-by-step guide to help you build a basic PDF Reader app in Flutter.

Step 1: Set Up Your Development Environment

Install Flutter: Follow the Flutter installation guide to set up Flutter on your machine.
Set Up an Editor: Install Visual Studio Code, Android Studio, or any other preferred IDE. Install Flutter and Dart plugins for your editor.

Step 2: Create a New Flutter Project

Open your terminal or command prompt.
Run the following command to create a new Flutter project:

   flutter create pdf_reader

Navigate to the project directory:

   cd pdf_reader

Step 3: Add Dependencies

Open the pubspec.yaml file in the root of your project.
Add the flutter_pdfview package (or syncfusion_flutter_pdfviewer for a more advanced viewer) to the dependencies section:

   dependencies:
     flutter:
       sdk: flutter
     flutter_pdfview: ^1.0.4  # Add this for basic PDF viewing
     # Alternatively, you can use:
     # syncfusion_flutter_pdfviewer: ^21.1.3-beta  # For a more advanced PDF viewer

Save the file and run the following command to install the package:

   flutter pub get

Step 4: Create the User Interface

Open the lib/main.dart file.
Replace its contents with the following code to create a basic PDF Reader app:

   import 'package:flutter/material.dart';
   import 'package:flutter_pdfview/flutter_pdfview.dart';
   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(
         title: 'PDF Reader',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: PDFReaderScreen(),
       );
     }
   }

   class PDFReaderScreen extends StatefulWidget {
     @override
     _PDFReaderScreenState createState() => _PDFReaderScreenState();
   }

   class _PDFReaderScreenState extends State<PDFReaderScreen> {
     String? localFilePath;

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

     Future<void> loadPDF() async {
       final url = 'https://www.example.com/sample.pdf'; // Replace with your PDF URL
       final file = await downloadFile(url);
       setState(() {
         localFilePath = file.path;
       });
     }

     Future<File> downloadFile(String url) async {
       final filename = url.split('/').last;
       final dir = await getApplicationDocumentsDirectory();
       final file = File('${dir.path}/$filename');

       if (await file.exists()) {
         return file;
       } else {
         final response = await HttpClient().getUrl(Uri.parse(url));
         final bytes = await consolidateHttpClientResponseBytes(await response.close());
         await file.writeAsBytes(bytes);
         return file;
       }
     }

     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('PDF Reader'),
         ),
         body: localFilePath != null
             ? PDFView(
                 filePath: localFilePath,
               )
             : Center(child: CircularProgressIndicator()),
       );
     }
   }

Step 5: Run the App

Ensure that your device or emulator is running.
Run the following command to start the app:

   flutter run

The app should load a PDF file from the provided URL and display it on the screen.

Step 6: Test the App

Test the app by opening different PDF files.
Ensure that the app correctly loads and displays the PDF files.

Step 7: (Optional) Customize the App

Enhance UI/UX: Modify the PDFReaderScreen to include features like pagination, zooming, and searching within the PDF.
Offline PDF Storage: Implement a feature to store and access PDFs offline.
User Interaction: Add features like bookmarks, annotations, or sharing PDFs.

OUTPUT

Source Code

You can use the code provided above directly in your Flutter project to create a basic PDF Reader app.

Post Views: 9