How to Make Image to Pdf Converter app in Flutter with Source Code

Creating an image-to-PDF converter app in Flutter involves several steps. Here’s a step-by-step guide, along with the necessary code snippets, to help you build this app.

Step 1: Set Up Flutter Project

Create a new Flutter project:

   flutter create image_to_pdf
   cd image_to_pdf

Add necessary dependencies in pubspec.yaml:

   dependencies:
     flutter:
       sdk: flutter
     image_picker: ^0.8.4+2
     pdf: ^3.6.1
     path_provider: ^2.0.2

Run flutter pub get to install the dependencies.

Step 2: Implement UI

Create a simple UI in lib/main.dart:

   import 'dart:io';

   import 'package:flutter/material.dart';
   import 'package:image_picker/image_picker.dart';
   import 'package:pdf/widgets.dart' as pw;
   import 'package:path_provider/path_provider.dart';
   import 'package:permission_handler/permission_handler.dart';

   void main() {
     runApp(MyApp());
   }

   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: ImageToPdfConverter(),
       );
     }
   }

   class ImageToPdfConverter extends StatefulWidget {
     @override
     _ImageToPdfConverterState createState() => _ImageToPdfConverterState();
   }

   class _ImageToPdfConverterState extends State<ImageToPdfConverter> {
     final picker = ImagePicker();
     List<File> _images = [];

     Future<void> pickImage() async {
       final pickedFile = await picker.pickImage(source: ImageSource.gallery);
       if (pickedFile != null) {
         setState(() {
           _images.add(File(pickedFile.path));
         });
       }
     }

     Future<void> createPDF() async {
       final pdf = pw.Document();
       for (var img in _images) {
         final image = pw.MemoryImage(img.readAsBytesSync());
         pdf.addPage(pw.Page(
           build: (pw.Context context) {
             return pw.Center(
               child: pw.Image(image),
             );
           },
         ));
       }

       final output = await getTemporaryDirectory();
       final file = File("${output.path}/example.pdf");
       await file.writeAsBytes(await pdf.save());
       print("PDF saved to ${file.path}");
     }

     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('Image to PDF Converter'),
         ),
         body: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               ElevatedButton(
                 onPressed: pickImage,
                 child: Text('Pick Image'),
               ),
               SizedBox(height: 20),
               ElevatedButton(
                 onPressed: createPDF,
                 child: Text('Create PDF'),
               ),
             ],
           ),
         ),
       );
     }
   }

Step 3: Handle Permissions (Android)

Add permissions to AndroidManifest.xml:

   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

Request permission using permission_handler:
Add the permission handling code to the createPDF method:

   Future<void> createPDF() async {
     if (await Permission.storage.request().isGranted) {
       final pdf = pw.Document();
       for (var img in _images) {
         final image = pw.MemoryImage(img.readAsBytesSync());
         pdf.addPage(pw.Page(
           build: (pw.Context context) {
             return pw.Center(
               child: pw.Image(image),
             );
           },
         ));
       }

       final output = await getTemporaryDirectory();
       final file = File("${output.path}/example.pdf");
       await file.writeAsBytes(await pdf.save());
       print("PDF saved to ${file.path}");
     }
   }

Step 4: Run the App

Run the app on an emulator or physical device:

   flutter run

Step 5: Test the Output

Pick an image and create a PDF:

Press the “Pick Image” button to select an image.
Press the “Create PDF” button to generate a PDF file from the selected image.

Check the output:

The console will print the location of the generated PDF file.
You can open the PDF file using a file manager or PDF viewer.

Step 6: (Optional) Improve the App

Add multiple image selection.
Enhance the UI for a better user experience.
Add options to save the PDF file to a specific location.
Handle edge cases, such as no image selected or permission denied.

This basic app allows users to select an image from their device’s gallery, convert it into a PDF, and save it locally.

Output

Here’s the output image showing how the Flutter app might look on a mobile device. image to pdf converter app.

Post Views: 21