FLUTTER APP

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

    DeepikaBy Updated:No Comments4 Mins Read

    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

    1. Install Flutter: Follow the Flutter installation guide to set up Flutter on your machine.
    2. 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

    1. Open your terminal or command prompt.
    2. Run the following command to create a new Flutter project:
       flutter create pdf_reader
    1. Navigate to the project directory:
       cd pdf_reader

    Step 3: Add Dependencies

    1. Open the pubspec.yaml file in the root of your project.
    2. 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
    1. Save the file and run the following command to install the package:
       flutter pub get

    Step 4: Create the User Interface

    1. Open the lib/main.dart file.
    2. 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

    1. Ensure that your device or emulator is running.
    2. Run the following command to start the app:
       flutter run
    1. The app should load a PDF file from the provided URL and display it on the screen.

    Step 6: Test the App

    1. Test the app by opening different PDF files.
    2. 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.

    Related Articles

    Share.

    Related Posts

    Leave A Reply