Introducing Holden - A Certificate Generator App using Flutter
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 insidedecodeBytes()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.
📰 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 to 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.
👀 ViewerScreen
- It renders a pdf file requested by the user using PDF viewer plugin.
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 💙
For more about programming, follow me and Aubergine Solutions, so you’ll get notified when we write new posts.
If you find this post useful, press👏 button as many times as you can and share this post with others. You can leave your feedback/suggestions in the comments 💬 below.
