spider for assets dart code
a small dart library to generate assets dart code from assets folder. it generates dart class with static const variables in it which can be used to reference the assets safely anywhere in the flutter app.
example assets dart code
before
widget build(buildcontext context) {
return image(image: assetimage('assets/background.png'));
}
after
widget build(buildcontext context) {
return image(image: assetimage(assets.background));
}
generated assets class
class assets {
static const string background = 'assets/background.png';
}
this method allows no error scope for string typos. also, it provides
auto-complete in the ide which comes very handy when you have
large amount of assets.
installation
this is package is an independent library that is not linked to your
project. so there’s no need to add it to your flutter project as it
works as a global command line tool for all of your projects.
pub global activate spider
run following command to see help:
spider --help
usage
create configuration file
spider provides a very easy and straight forward way to create
a configuration file.
execute following command and it will create a configuration file
with default configurations in it.
spider create
now you can modify available configurations and spider will use
those configs when generating dart code.
use json config file
though above command creates yaml
format for config file, spider
also supports json
format for config file. use this command to
create json
config file instead of yaml
.
spider create --json
no matter which config format you use, json
or yaml
, spider
automatically detects it and uses it for code generation.
here’s the default configuration that will be in the config file:
groups:
- path: assets/images
class_name: images
package: res
generate code
run following command to generate dart code:
spider build
watch directory
spider can also watch given directory for changes in files and rebuild
dart code automatically. use following command to watch for changes:
spider build --watch
see help for more information:
spider build --help
smart watch (experimental)
the normal --watch
option watches for any kind of changes that happens
in the directory. however this can be improved my smartly watching the
directory. it includes ignoring events that doesn’t affect anything like
file content changes. also, it only watches allowed file types and
rebuilds upon changes for those files only.
run following command to watch directories smartly.
spider build --smart-watch
categorizing by file extension
by default, spider allows any file to be referenced in the dart code.
but you can change that behavior. you can specify which files you want to be referenced.
path: assets
class_name: assets
package: res
types: [ jpg, png, jpeg, webp, bmp, gif ]
use prefix
you can use prefixes for names of the generated dart references.
prefixes will be attached to the formatted reference names.
path: assets
class_name: assets
package: res
prefix: ic
output
class assets {
static const string iccamera = 'assets/camera.png';
static const string iclocation = 'assets/location.png';
}
advanced configuration
spider provides supports for multiple configurations and classifications.
if you wanna group your assets by module, type or anything, you can do
that using groups
in spider.
example
suppose you have both vector(svgs) and raster images in your project
and you want to me classified separately so that you can use them with
separate classes. you can use groups here. keep your vector and raster
images in separate folder and specify them in the config file.
spider.yaml
groups:
- path: assets/images
class_name: images
package: res
- path: assets/vectors
class_name: svgs
package: res
here, first item in the list indicates to group assets of
assets/images
folder under class named images
and the second
one indicates to group assets of assets/vectors
directory under
class named svgs
.
so when you refer to images
class, auto-complete suggests raster
images only and you know that you can use them with assetimage
and
other one with vector rendering library.
enable verbose logging
spider prefers not to overwhelm terminal with verbose logs that are
redundant for most of the cases. however those verbose logs come quite
handy when it comes to debug anything. you can enable verbose logging by
using --verbose
option on build command.
spider build --verbose
# watching directories with verbose logs
spider build --watch --verbose
Comments are closed.