Introducing Platypus - Creating Code Screenshots Made Easy on Mobile 📱

Tirth Patel
Dec 18, 2019 · 4 min read

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.

Demo

📝 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


📁 Directory Structure

Directory Structure

🍺 Dependencies

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

🎹 Coding

  • There is only 1 screen in the app: HomeScreen.

🚪 main.dart

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

🏡 HomeScreen

HomeScreen
  • HomeProvider file under lib/providers/ has several members, getters and setters for managing the states of the home screen.
lib/providers/home.dart
  • 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.
AppBar in lib/screens/home/home.dart
  • 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.
Method to export style config in lib/utils/utils.dart
  • Body of the HomeScreen has a Row which contains 2 things: editor & list of widgets to change the styling of the code.
Row widget in the body of the HomeScreen - lib/screens/home/home.dart
  • 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.
First Child (Editor) of Row in the body of HomeScreen - lib/screens/home/home.dart
  • 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.
Second Child (Styling Preferences) of Row in the body of HomeScreen — lib/screens/home/home.dart

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 💙


Aubergine Solutions

Among the World’s Top 50 UX Agencies. We’re a team of UX Designers and IT Engineers. We balance our madness and method. To know more about us visit www.auberginesolutions.com

Tirth Patel

Written by

Aubergine Solutions

Among the World’s Top 50 UX Agencies. We’re a team of UX Designers and IT Engineers. We balance our madness and method. To know more about us visit www.auberginesolutions.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade