Introducing Platypus - Creating Code Screenshots Made Easy on Mobile 📱
Published in
4 min readDec 18, 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 💙
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.
