3 ms·
Show HN: I have built a code library for Flutter projects
As a Flutter fan since 2019, the number of mobile and web apps I developed with Flutter grew over the years. A nice side effect was that over time, a library of reusable widgets emerged that were often useful in my future projects.
For example, there's the DashedPathPainter, which converts any path to a dashed path. Similarly, there's the AnimatedBorderPainter, which adds an animated border to its child, similar to the Trim Path feature from Adobe AfterEffects. Or the ChatBubble, inspired by WhatsApp and Telegram, which might be useful in an app with a chat function.
I built many of these widgets from scratch because I didn't want to add another package to my pubspec.yaml for a single function. Of course, I also use packages for dependency injection, state management, or as an add-on for functional programming. But I've never been a fan of adding another dependency to my project, just for a few helper functions or a single widget.
I thought that maybe I'm not the only Flutter developer in this situation. So I came up with the idea for Flutter Code Snippets: a simple code library for Flutter widgets, entire screens, as well as all kinds of helper functions. You can search for the right component, copy the code and paste it into your project. Done! At least that's how simple I imagine it to be ;)
Since I had already built a small library from my existing projects, I still had to build the frontend (a web app built with Flutter), add authentication and a database (Firestore), integrate a payment flow (Stripe) and write some backend logic (Google Cloud Functions).
The result can be seen at https://flutter-code-snippets.web.app.
I'm now at a point where I've completed all the basic work I wanted to do, and I'm looking for another round of feedback. I'd love for you guys to check it out and let me know what you think.
Thanks!
- politelemon 4y agoHi there, good effort to put something together. Feedback: This page appears 'broken' in Firefox: https://flutter-code-snippets.web.app/#/components https://flutter-code-snippets.web.app/#/components I think it's because the box sizes are too large so the text isn't visible and it just looks like a series of wispy images. The font size on the code samples feels too small, though that might be just my own subjectivity: https://flutter-code-snippets.web.app/#/component-details https://flutter-code-snippets.web.app/#/component-details Normally this would be written as 'Privacy policy' instead of 'Private policy': https://flutter-code-snippets.web.app/#/private-policy https://flutter-code-snippets.web.app/#/private-policy The orange 'lozenges' on the main page, I thought they were links. I tried clicking them a few times. Not sure what you were going for? https://flutter-code-snippets.web.app/#/ https://flutter-code-snippets.web.app/#/ It's good that you included a little 'sample' on each page with the code.
- hnnngwdlch 4y agoThanks for your valuable feedback, politelemon! The 'Private policy' issue should be fixed, thanks for pointing that out ;) It makes sense that one would think that the orange lozenges are clickable. I will make them clickable and link them to the respective components. I agree that users might otherwise get confused. Regarding the font size of the code samples I could implement some sort of zoom functionality, so that the user can enlarge the font size if necessary. That's also a good point. Unfortunately I don't understand your first point (the broken components page). Could you maybe elaborate and describe the issue again? At first sight, the page looks normal to me in Firefox. Thanks for taking the time to look at it!
- hnnngwdlch 4y agohttps://flutter-code-snippets.web.app https://flutter-code-snippets.web.app