Software Development

Introducing Platypus – Creating Code Screenshots Made Easy on Mobile 📱

Tirth Patel • Dec 25, 2019

Carbon is a popular service for creating beautiful code screenshots. I always use it to create awesome code screenshots. Imagine a situation when you don’t have a computer and you want to do the same, you’ve to use their website on the mobile. So, what if there was a native application for the exact same purpose?!

Introducing Platypus (made using Flutter), creating code screenshots made easy on mobile.

Overview

Users can customize the look and feel of the screenshot by changing padding, background color, syntax highlighting, programming language, font-size, line-height, shadow & style of window circles (red, yellow, and green buttons).
Screenshots can be shared via other applications such as Twitter, Slack, or Gmail, etc. or save it locally on the device.
Screenshot styling (padding, background color, syntax highlighting, programming language, font-size, line-height, shadow & style of window circles (red, yellow, and green buttons) can be exported as JSON.
Exported screenshot stylings can be imported to quickly generate screenshots.

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 platypus

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 only 1 screen in the app: HomeScreen.

main.dart

Here we have set up routes, providers and themes for the application.

HomeScreen

HomeProvider file under lib/providers/ has several members, getters and setters for managing the states of the home screen.

HomeScreen has an app-bar which contains a reset button to reset everything to default.
There is an attach button to import an existing style config (JSON) from the device, and an eye icon to switch to preview mode from edit mode.
Clicking on the eye icon shows an edit icon by hiding the icon, clicking on which we’re back in edit mode.
When you’re in preview mode, the share icon is also visible to either share the code screenshot generated using screenshot package using share_extend plugin or export the current style config as a JSON file using file picker plugin.

Clicking on the export config button in the share dialog creates the map (key, value) where values are the current value of all preferences (padding, font-size, background-color, etc.). This map is encoded using jsonEncode and saved locally on the device as a JSON file.

Body of the HomeScreen has a Row which contains 2 things: editor & list of widgets to change the styling of the code.

Editor UI is made by combining widgets like TextFormField, Row, Column, SingleChildScrollView, and Containers.
Screenshot widget helps in generating the screenshot of the entire widget tree below it.

Besides the editor, there is a list of widgets that helps in customizing the look and feel of the editor code.
It is made up of widgets such as Sliders, RaisedButtons, Containers, and Dropdowns. You can check out these widgets under lib/screens/home/widgets/.
You can change horizontal/vertical padding between the code editor and the container behind it.
You can change the background color of the container & toggle the shadow of the container behind the code editor.
You can also change the font-size, line-height, and syntax highlighting theme (flutter highlight package) of the code.
The position and style of window control buttons (red, yellow, and green circles) can be customized as well.

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. Also Read: Creating a User-Friendly Certificate Generator App with Flutter.

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.