Back
Using Pieces, Flutter and Dart to Build Pieces
From saving common widget declarations to extracting code from instructional videos, we reveal how the team building Pieces with Flutter and Dart uses Pieces.
Pieces is tremendously helpful for the team building Pieces, especially when using Flutter and Dart. From saving common Widget declarations to extracting code from instructional videos, we reveal how the team building Pieces, uses Pieces.
What is Pieces?
Pieces is the fastest, smartest AI Assistant for snippets. We're enabling developers to automatically or manually save useful code snippets, extract code from screenshots, auto-complete code and more.
To learn more about Pieces and how it improves developer productivity, check out the rest of our site.
Understanding our Stack
In order to understand how we use Pieces to build Pieces, it’s helpful to review our tech stack. Pieces is primarily built using Flutter and Dart. A while back, we chose Flutter and Dart for a few key reasons:
One codebase, multiple platforms
Strong-typed
Can utilize platform-specific APIs if needed
High performance rendering and animations out-of-the-box
Default code style and conventions
Works for desktop apps, web apps, and mobile apps
In contrast to common front-end tools like HTML, CSS, and JS, Flutter is all-encompassing. Meaning, you declare your UI, styles and business logic all within the same file and tree using a class-based syntax and structure.
Further, instead of a DOM tree, Flutter utilizes a widget tree. Widget trees are where you find all UI elements (referred to as widgets in Flutter). Like a DOM tree, widget trees get complex extremely fast, and developers find themselves reusing a lot of the same widgets and callback functions across many areas of an application.
Pieces + Flutter = <3
While building the Pieces app with Flutter and Dart, our team found many valuable use cases for saving snippets in the Pieces app to improve our productivity. Let’s review some of them.
Saving & Reusing Widgets
If you’ve ever written with Flutter, you’ve probably seen a snippet just like this a thousand times. This is a preset container with a templated child widget for easy plug and play.
One might think, “Can’t you just abstract this away into a new widget?” Yes, of course you can, but that abstracted widget will still include its own set of custom properties in order to use it. Both a custom widget and a Flutter widget can have many different properties, which can be hard to remember.
When building the Pieces app, we saved snippets like this into Pieces ALL. THE. TIME. Once you save, quickly give it a name and continue on.
When I need to reuse this Container Widget again, which is in almost every Widget, Pieces makes it simple to find with fast, non-obtrusive search. All I need to do is enter a keyword (i.e: Container), or some of the metadata - where it’s from, the title, description, or tags.
Now, we no longer worry about messing up another widget tree in order to copy and paste it or other Flutter default code that we've saved in Pieces.
Saving Flutter and Dart Examples
When combing through Flutter and Dart doc sites or watching demo videos, there are hundreds of code examples that come in handy when implementing new features or figuring out which widget to use for certain purposes. From Flutter widget tree diagrams to Flutter widget snippets and beyond, there's so much useful code to save for later.
Where Pieces really comes in handy is being able to (1) save these code examples with a single click while also capturing the context of where it came from and (2) extract code from a screenshot from, say, a YouTube demo video using OCR.
Using the Pieces Chrome Extension
Using the example screenshot above, when creating a grid list with Flutter, I use the Pieces Chrome Extension to single-click save the code snippet while automatically tagging the website it came from.
Now, when I need to use a grid widget in Pieces, I can find this example and the link to the documentation in a matter of seconds.
Using Pieces OCR (Optical Character Recognition)
The other great way we use Pieces when saving Flutter, Dart, and other code examples, is using the OCR feature to extract text/code from screenshots.
One of the best ways to learn how to use specific Widgets is to watch Flutter's Widget of the Week videos on YouTube. These are short, extremely focused examples of implementing a Widget.
Since these videos move quickly, we often take screenshots of the final implementation so we can (1) reference the code later on and (2) actually use the code from the example.
We do this by simply dragging the screenshot into Pieces and voila, the code is extracted and ready to use.
To see OCR in action, try CodefromScreenshot.
Import Statements
Nothing is more annoying than having to manually write an import statement. Flutter does have nice tools to alleviate this pain, but even they can be annoying if you’re moving quickly.
As shown in the screenshot above, most of our files require some of the same common imports. The annoying thing, even when using Flutter and Dart tooling, is that you still have to make extra keystrokes to import all of the classes you’re using in the file.
Pieces has become a life saver when dealing with imports. When starting a new file, we can instantly grab our common imports that we know we’ll need and paste them into our new file. This way, we don’t have to spend time command-clicking, guessing file paths, or finding the import in another file.
Restructuring Flutter Widget Trees
I’ll admit, sometimes it gets a little scary when you’re about to restructure a loaded widget tree. Oftentimes, 99% of the tree is functioning nicely, but there’s that 1% that needs an upgrade or bug fix.
When this happens, I (1) don’t want to cause any regressions, (2) need to refer to my old tree to make sure I have feature-parity and (3) don’t want to flip back-and-forth trying to decode my Git changes. So, to make life easier, I save my old tree in Pieces!
This gives me great peace of mind knowing that I can always refer back to the old tree if needed, and now can confidently start my updates on a blank canvas.
Merge Conflicts
Have you ever spent a few days working on something with a lot of nitty-gritty details and you’re a little nervous something might get messed up when it’s time to merge? Well, when working with Flutter, you know sometimes merge conflicts with widget trees can be impossible to read, especially when you start trying to line up closing parenthesis, brackets and semicolons.
Another way we use Pieces is to help manage merge conflicts. Even if it's a temporary save, Pieces is great for storing a chunk of code as backup in case you mess up your merge.
After all, the last thing any developer wants is broken code on the main branch. Thankfully, Pieces helps address that concern.
Get Started for Free
As cheesy as it may sound, Pieces is a product built for developers, by developers. Every day, we’re using Pieces to solve big and small problems for ourselves and thinking about how other developers might benefit.
If you experience some of the challenges mentioned above or anything similar, get started with Pieces today FOR FREE.
No account or personal information required, and it runs 100% on your local machine!
Install Pieces now on MacOS, Windows, or Linux.
Further reading…
If you haven’t already, be sure to check out how you can use Pieces to extract text/code from screenshots.
Learn about our recent features and updates via our Changelog.
Share with us how we can continue to improve Pieces!
Cheers!
Mack
