How to draw an unordered list using Flutter PDF Library?

The Syncfusion Flutter PDF library is used to create, read, and edit PDF documents programmatically without Adobe dependencies. Using this library, you can draw an Unordered list in a PDF using Flutter.

Steps to draw an unordered list in a PDF document programmatically:

1. Create a new Flutter application project.

1. Open Visual Studio Code (After installing the Dart and Flutter extensions as stated in this setup editor page).
2. Click View -> Command Palette.

3. Type Flutter and choose Flutter: New Project.

4. Enter the project name and press the Enter button.
5. Now choose the location of the project.

2. Add the following code in your pubspec.yaml file to install the syncfusion flutter pdf package in your application. It will be automatically downloaded from the pub once you trigger the flutter pub get a comment or Get packages option from the Visual Studio Code.

   dependencies:
     syncfusion_flutter_pdf: ^20.3.49
   

1. Import the following package in your main.dart file.

   import 'package:syncfusion_flutter_pdf/pdf.dart';
   

3. Add the following code in the lib/main.dart file to create a simple button.

   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Text(widget.title!),
       ),
       body: Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[
             TextButton(
               child: Text(
                 'Draw List',
                 style: TextStyle(color: Colors.white),
               ),
               style: ButtonStyle(
                   backgroundColor: MaterialStateProperty.resolveWith(
                       (states) => Colors.blue)),
               onPressed: _drawList,
             )
           ],
         ),
       ),
     );
   }
   

4. Add the following code to the _drawList function to draw an unordered list to the PDF document programmatically.

   Future<void> _drawList() async{
    
     //Create a new document
     PdfDocument document = PdfDocument();
    
     //Add a new page to the document
     PdfPage page = document.pages.add();
     Size size = page.graphics.clientSize;
    
     //Create an unordered list
     PdfUnorderedList list = PdfUnorderedList();
    
     //Set the marker style
     list.marker.style = PdfUnorderedMarkerStyle.disk;
    
     //Set the font
     list.font = PdfStandardFont(PdfFontFamily.helvetica, 12);
    
     //Set a string format
     list.stringFormat = PdfStringFormat(lineSpacing: 10);
    
     //Set the list indent
     list.indent = 10;
    
     //Set the text-indent
     list.textIndent = 10;
    
     //Add items to the list
     list.items.add(PdfListItem(text: 'PDF'));
     list.items.add(PdfListItem(text: 'XlsIO'));
     list.items.add(PdfListItem(text: 'DocIO'));
     list.items.add(PdfListItem(text: 'PPT'));
    
     //Draw a list
     list.draw(
         page: page, bounds: Rect.fromLTWH(0, 10, size.width, size.height));
    
     //Save and Dispose the document
     List<int> bytes = await document.save();
    
     //Dispose the document 
     document.dispose();
     
     //Save the file and launch/download.
     SaveFile.saveAndLaunchFile(bytes, 'output.pdf');
    
     }
   

5. Follow the below steps to launch the generated PDF file on desktop, mobile, and web.

Web:

1. Create a new dart file named save_file_web.dart under the lib folder and import the following packages in save_file_web.dart file.

   import 'dart:convert';
   import 'dart:html';
   

2. Include the following code snippet in save_file_web.dart file to open the PDF document in Web.

   class SaveFile {
     static Future<void> saveAndLaunchFile(
         List<int> bytes, String fileName) async {
       AnchorElement(
           href:
               'data:application/octet-stream;charset=utf-16le;base64,${base64.encode(bytes)}')
         ..setAttribute('download', fileName)
         ..click();
     }
   }
    
   

 Desktop and Mobile:

3. Add the following dependencies in your pubspec.yaml file.

   open_file: ^3.2.1
   path_provider: ^2.0.11 #Open source library to launch the PDF file in mobile devices
   

4. Create a new dart file named save_file_mobile_and_desktop.dart under the lib folder and import the following packages in save_file_mobile_and_desktop.dart file.

   import 'dart:io';
   import 'package:open_file/open_file.dart';
   import 'package:path_provider/path_provider.dart';
   

5. Include the following code snippet in save_file_mobile_and_desktop.dart to open the PDF document in Desktop and Mobile.

   class SaveFile {
     static Future<void> saveAndLaunchFile(
         List<int> bytes, String fileName) async {
       //Get external storage directory
       Directory directory = await getApplicationSupportDirectory();
       //Get directory path
       String path = directory.path;
       //Create an empty file to write PDF data
       File file = File('$path/$fileName');
       //Write PDF data
       await file.writeAsBytes(bytes, flush: true);
       //Open the PDF document in mobile
       OpenFile.open('$path/$fileName');
     }
   }
    
   

6. Run the sample using the flutter run command. This will draw an unordered list in the PDF document. After the application launches, you will get the PDF document as follows.

A complete working sample can be downloaded from PdfSampleList.zip.

Take a moment to peruse the documentation. You can find options like adding an ordered or unordered list in a PDF document, the styles can be bullet, circle, or image.


Conclusion

I hope you enjoyed learning how to draw an unordered list using Flutter PDF Library.

You can refer to our Flutter PDF feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Flutter PDF Flutter PDF example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!