Asset Management in Flutter with asset_showcase: Reduce App Size Effortlessly

Managing assets in a growing Flutter project can quickly become chaotic. As your project scales, keeping track of images, icons, and other resources becomes increasingly difficult.

This is where asset_showcase, a Dart package I developed, comes in handy. It offers a streamlined way to generate a visual HTML showcase of your project assets, making asset management more efficient and less time-consuming.

The Problem: Asset Overload

In any sizeable Flutter project, assets can pile up quickly. Manually sifting through directories to find specific files is not only tedious but also prone to duplication. Whether it’s an image, font, or document, locating the right asset and ensuring no duplication is challenging, especially when working in a team.

The Solution: asset_showcase Package

The asset_showcase package was designed to solve this problem by automatically generating an HTML file that lists and organises all your project assets in a visually appealing and accessible format.

Using this package, I was able to identify and remove approximately 4 MB of duplicate and bloated assets from one of my apps.

Key Features

Automated HTML Showcase:

• Generates a showcase.html file that visually lists all assets from all the subdirectories of a specified directory.
• The generated HTML is responsive and interactive, offering a seamless user experience on any device.

Sorting and Filtering:

• Allows you to sort assets by name or size and filter them by file extension, making it easier to locate the most space-consuming files.

Search Capability:

• Includes a search bar for quickly finding assets by their name, enhancing productivity by reducing the time spent searching for files.

How to Get Started

Integrating asset_showcase into your Flutter project is straightforward and involves just a few steps.

Installation:

Add asset_showcase as a dev dependency in your pubspec.yaml file:

dev_dependencies: 
   asset_showcase: ^1.0.4

You can get the latest version information from the pub.dev page.

Fetch the package using:

dart pub get

Usage:

To generate the asset showcase, run:

dart run asset_showcase

By default, this command will create a showcase.html file in your project's root directory, showcasing assets from the assets folder.

You can customise the assets directory and output file path using command-line options:

dart run asset_showcase --assets=path/to/assets --output=path/to/output.html

Why Use asset_showcase?

asset_showcase simplifies the management of project assets by providing a clear, visual representation. This not only saves time but also enhances productivity by making it easier to locate and manage your resources. Here’s how it can benefit you:

• Improved Organisation: Provides a structured view of your assets, reducing clutter and making it easier to navigate through your files.
• Enhanced Efficiency: Quickly find and manage assets with sorting, filtering, and search capabilities.
• Better Workflow Integration: Seamlessly integrates into your development process without requiring significant changes.

Future Enhancements

Looking ahead, I plan to expand asset_showcase with additional features to make it even more powerful and user-friendly:

• Asset Previews: Allowing previews of images, videos, and other types of assets directly within the showcase.
• Advanced Customisation: Providing more options to customise the appearance and layout of the generated HTML.
• CI/CD Integration: Automating the generation of the asset showcase as part of continuous integration and deployment workflows.
• PRs are Welcome: A recent pull request added the audio playback feature, extending this package’s capabilities to audio files. Feel free to explore the Github repository and raise one for a feature or fix.

Conclusion

Managing assets in a Flutter project doesn’t have to be a daunting task. With asset_showcase, you can automate the creation of a visual, organised overview of your assets, saving time and improving your development workflow. Whether you’re working on a small app or a large-scale project, asset_showcase can help you maintain order and efficiency.

Try it out today by adding it to your project and experience a smoother, more organised approach to asset management. Happy coding!

🚀 Let’s connect!

Connect with me on LinkedIn for professional insights and networking.

Explore my contributions on GitHub and Stack Overflow to collaborate on something amazing! ✨

Consider clapping 👏🏼 if you found this article insightful.