Say goodbye to the hassle of manual asset handling.
The Spider package streamlines your workflow by automating asset management.
Assets are essential components of any Flutter project, regardless of its size. We often work with icons or images in different formats like .png or .svg.

To manage these assets, many developers create classes with variables that point to their paths.

class ImageAssets {
  // PNG
  static String appIcon = 'assets/app_icons/app_icon.png';
}

class VectorAssets {
 // SVG
  static String googleIcon = 'assets/sign_in_icons/google.svg';
  static String appleIcon = 'assets/sign_in_icons/apple.svg';
}

And then we make use of this class in our UI code, which make our code looks clean & organise.

class MyHome extends StatelessWidget {
  const MyHome({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Image.asset(ImageAssets.appIcon),
    );
  }
}

However, this method has two drawbacks: it’s repetitive and prone to typos when defining asset path variables.
Thankfully, the Spider package steps in to handle these tedious tasks, saving us time and effort.

Let’s get started with Spider installation

Spider doesn’t need to be added to the project, it’s activated globally.
We can install it using pub

dart pub global activate spider

Or using Homebrew

brew tap birjuvachhani/spider
brew install spider

Usage

To generate asset variables, Spider uses a configuration file. Don’t worry about creating this file yourself, as Spider will automatically generate it for you.
Execute following command, and it will create a configuration file with default configurations in it at the root directory of you project.

spider create

Here’s the default configuration that will be in the config file:

# Generated by Spider

# Generates unit tests to verify that the assets exists in assets directory
generate_tests: true

# Use this to remove vcs noise created by the `generated` comments in dart code
no_comments: true

# Exports all the generated file as the one library
export: true

# This allows you to import all the generated references with 1 single import!
use_part_of: true

# Location where all the generated references will be stored
package: resources

groups:
  - path: assets/images
    class_name: Images
    types: [ .png, .jpg, .jpeg, .webp, .webm, .bmp ]
 - path: assets/svgs (I have adding this line for SVG)
    class_name: Vectors
    types: [ .svg ]

Generate code

Run following command to generate dart code:

spider build

This will create a resources directory which contains the static const assets strings.

Need to run spider build command whenever we add new assets into our project.

You can also use below command to watch given directory for changes in files and rebuild dart code automatically.

spider build --watch

Voilà, we’re ready to use our assets

.
.
.
         Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Image.asset(Images.googleIcon),
                 ],
               ),
.
.
.