Software Development

Introducing Holden – A Certificate Generator App using Flutter

Tirth Patel • Dec 24, 2019

If you’re an event organizer, you know the pain of generating the certificates for participants. What if there was a mobile application that can do this tedious task for you?!

Introducing Holden, easy to use certificate generator app made using Flutter.

Overview

The user selects an xlsx file from the device.
The app parses xlsx file and displays the names (of participants) in a list.
Clicking on an individual name opens the certificate of that participant.
The user can select the table from the drop-down.
A Certificate can be downloaded, viewed and shared.
Multiple Certificates can be shared with others via other applications (Google Drive, WhatsApp, Gmail, etc.) or saved locally on the device.

Prerequisites

Flutter SDK
Android Studio / VSCode / Intellij Idea / Any Other (IDE of choice)
Dart & Flutter Plugins for IDE
Emulator or Physical Device
Create a new flutter project using the following command

$ flutter create certificate_generator

Directory Structure

Dependencies

Add the following dependencies in pubspec.yaml file and run the following command to retrieve them.

$ flutter packages get

Coding

There is a total of 3 screens in the app: HomeScreen, ResultScreen & ViewerScreen.

main.dart

Here we have set up routes, providers, runtime permission requests, and theme for the application.

HomeScreen

Initially, suggestion text is shown to the user when no file is selected.

Format of the xlsx should be like this:

HomeScreen has a floating action button, clicking on which file picker is shown where the user can select an xlsx file that has names of participants.

HomeProvider exposes setter & getters to manipulate the path of user-selected xlsx file, names of tables from user-selected xlsx file, and the name of the currently selected table from user-selected xlsx file.

Once the file is selected, HomeProvider sets the path of that file using the setter & notifies the listeners. So, the body of HomeScreen now displays the list of names parsed using spreadsheet decoder from the selected xlsx file. We need to pass the result of File(filePath).readAsBytesSync() the inside decodeBytes()method.
Clicking on a name shows the certificate of that participant in ResultScreen.

Now, in the app-bar a drop-down gets visible. It displays names all tables from xlsx file and choosing an option displays names from that table.

A second FAB with share icon gets visible, clicking on which shows the share dialog to share PDFs of all the participants from the selected table.

HomeScreen Flow

ResultScreen

It displays the certificate of the individual participant.

The certificate has 3 actions: Download, View, and Share.

When the user clicks on the download button PDF is generated with the help of pdf package. Snackbar is shown when the certificate is generated which also contains an action to quickly view the certificate.

The code for PDF generation is extracted into a separate method. Once the pdf is generated it is saved on the user’s device inside the application documents directory. PDF package provides widgets to build UI for PDF and its widget system is very similar to Flutter’s widget system. So, it’s easy to replicate certificate UI for PDF.

When the user clicks on the view button, the downloaded certificate is opened in ViewerScreen. If the certificate doesn’t exist then the “Not Found” message is shown in SnackBar with download action to quickly download the certificate.

When the user clicks on the share button then share dialog is shown with the help of share_extend plugin to the user so the certificate can be shared with others via other apps. If the certificate doesn’t exist then the “Not Found” message is shown in SnackBar with download action to quickly download the certificate.

ResultScreen Flow

ViewerScreen

It renders a pdf file requested by the user using PDF viewer plugin.

ViewerScreen Flow

This is a WIP project. We’re planning to add support for more file formats, the ability to use a URL of spreadsheets for simplicity, and certificate designer for customization.

You can check out the source code of the app here. Feel free to contribute to the project by creating issues or sending pull-requests.

That’s it for this one. Thank you for reading this

Add this to the end – Also Read: Creating a Flutter-based Code Screenshot Generator (Platypus)

Tirth Patel

I'm a Flutter App Developer at Aubergine Solutions Pvt. Ltd. I'm passionate about mobile application development & open-source technologies. My expertise includes Dart, Flutter, Python, Git, Firebase, SQLite, Java. This year I was nominated as a recommended candidate to attend Google I/O 2019 conference from the Google India Scholars community. (Google India Challenge Scholarship 2018) I've delivered several talks in local communities on topics ranging from Functional Programming in Dart to Getting Started with Flutter.