Download this source code for
5 USD


Download this source code for
5 USD


Download this source code for
5 USD


Download this source code for
5 USD

flutter_gen

the flutter code generator for your assets, fonts, colors, … — get rid of all string-based apis.

motivation

using asset path string directly is not safe.

# pubspec.yaml
flutter:
  assets:
    - assets/images/profile.jpg

bad
what would happen if you made a typo?

widget build(buildcontext context) {
  return image.asset('assets/images/profile.jpeg');
}

// the following assertion was thrown resolving an image codec:
// unable to load asset: assets/images/profile.jpeg

⭕️ good
we want to use it safely.

widget build(buildcontext context) {
  return assets.images.profile.image();
}

installation

homebrew

works with macos and linux.

$ brew install fluttergen/tap/fluttergen

pub global

works with macos, linux and windows.

$ dart pub global activate flutter_gen

you might need to set up your path.

as a part of build_runner

  1. add [build_runner] and [fluttergen] to your package’s pubspec.yaml file:
dev_dependencies:
  build_runner:
  flutter_gen_runner:
  1. install [fluttergen]
$ flutter pub get
  1. use [fluttergen]
$ flutter packages pub run build_runner build

usage

run fluttergen after the configuration pubspec.yaml.

$ fluttergen -h

$ fluttergen -c example/pubspec.yaml

configuration file

[fluttergen] generates dart files based on the key flutter and flutter_gen of pubspec.yaml.
default configuration can be found here.

# pubspec.yaml
# ...

flutter_gen:
  output: lib/gen/ # optional (default: lib/gen/)
  line_length: 80 # optional (default: 80)

  # optional
  integrations:
    flutter_svg: true
    flare_flutter: true

  colors:
    inputs:
      - assets/color/colors.xml

flutter:
  uses-material-design: true
  assets:
    - assets/images/

  fonts:
    - family: raleway
      fonts:
        - asset: assets/fonts/raleway-regular.ttf
        - asset: assets/fonts/raleway-italic.ttf
          style: italic

available parsers

assets

just follow the doc adding assets and images#specifying assets to specify assets, then [fluttergen] will generate related dart files.
no other specific configuration is required.
ignore duplicated.

# pubspec.yaml
flutter:
  assets:
    - assets/images/
    - assets/images/chip3/chip.jpg
    - assets/images/chip4/chip.jpg
    - assets/images/icons/paint.svg
    - assets/json/fruits.json
    - assets/flare/penguin.flr
    - pictures/ocean_view.jpg

these configurations will generate assets.gen.dart under the lib/gen/ directory by default.

usage example

[fluttergen] generates image class if the asset is flutter supported image format.

example results of assets/images/chip.jpg:

  • assets.images.chip is an implementation of assetimage class.
  • assets.images.chip.image(...) returns image class.
  • assets.images.chip.path just returns the path string.
widget build(buildcontext context) {
  return image(image: assets.images.chip);
}

widget build(buildcontext context) {
  return assets.images.chip.image(
    width: 120,
    height: 120,
    fit: boxfit.scaledown,
  );

widget build(buildcontext context) {
  // assets.images.chip.path = 'assets/images/chip3/chip3.jpg'
  return image.asset(assets.images.chip.path);
}

if you are using svg images with flutter_svg you can use the integration feature.

# pubspec.yaml
flutter_gen:
  integrations:
    flutter_svg: true

flutter:
  assets:
    - assets/images/icons/paint.svg
widget build(buildcontext context) {
  return assets.images.icons.paint.svg(
    width: 120,
    height: 120
  );
}

available integrations

packages file extension setting usage
flutter_svg .svg flutter_svg: true assets.images.icons.paint.svg()
flare_flutter .flr flare_flutter: true assets.flare.penguin.flare()

 

in other cases, the asset is generated as string class.

// if don't use the integrations.
final svg = svgpicture.asset(assets.images.icons.paint);

final json = await rootbundle.loadstring(assets.json.fruits);

[fluttergen] also support generating other style of assets class:

# pubspec.yaml
flutter_gen:
  assets:
    # assets.imageschip
    # style: camel-case

    # assets.images_chip
    # style: snake-case

    # assets.images.chip (default style)
    # style: dot-delimiter

flutter:
  assets:
    - assets/images/chip.png

the root directory will be omitted if it is either assets or asset.

assets/images/chip3/chip.jpg  => assets.images.chip3.chip
assets/images/chip4/chip.jpg  => assets.images.chip4.chip
assets/images/icons/paint.svg => assets.images.icons.paint
assets/json/fruits.json       => assets.json.fruits
pictures/ocean_view.jpg       => assets.pictures.oceanview
example of code generated by fluttergen
/// generated code - do not modify by hand
/// *****************************************************
///  fluttergen
/// *****************************************************

import 'package:flutter/widgets.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter/services.dart';
import 'package:flare_flutter/flare_actor.dart';
import 'package:flare_flutter/flare_controller.dart';

class $picturesgen {
  const $picturesgen();

  assetgenimage get chip5 => const assetgenimage('pictures/chip5.jpg');
}

class $assetsflaregen {
  const $assetsflaregen();

  flaregenimage get penguin => const flaregenimage('assets/flare/penguin.flr');
}

class $assetsimagesgen {
  const $assetsimagesgen();

  assetgenimage get chip1 => const assetgenimage('assets/images/chip1.jpg');
  assetgenimage get chip2 => const assetgenimage('assets/images/chip2.jpg');
  $assetsimageschip3gen get chip3 => const $assetsimageschip3gen();
  $assetsimageschip4gen get chip4 => const $assetsimageschip4gen();
  $assetsimagesiconsgen get icons => const $assetsimagesiconsgen();
  assetgenimage get logo => const assetgenimage('assets/images/logo.png');
  assetgenimage get profile => const assetgenimage('assets/images/profile.jpg');
}

class $assetsjsongen {
  const $assetsjsongen();

  string get fruits => 'assets/json/fruits.json';
}

class $assetsmoviegen {
  const $assetsmoviegen();

  string get theearth => 'assets/movie/the_earth.mp4';
}

class $assetsunknowngen {
  const $assetsunknowngen();

  string get unknownmimetype => 'assets/unknown/unknown_mime_type.bk';
}

class $assetsimageschip3gen {
  const $assetsimageschip3gen();

  assetgenimage get chip3 =>
      const assetgenimage('assets/images/chip3/chip3.jpg');
}

class $assetsimageschip4gen {
  const $assetsimageschip4gen();

  assetgenimage get chip4 =>
      const assetgenimage('assets/images/chip4/chip4.jpg');
}

class $assetsimagesiconsgen {
  const $assetsimagesiconsgen();

  svggenimage get fuchsia =>
      const svggenimage('assets/images/icons/fuchsia.svg');
  svggenimage get kmm => const svggenimage('assets/images/icons/kmm.svg');
  svggenimage get paint => const svggenimage('assets/images/icons/paint.svg');
}

class assets {
  assets._();

  static const $assetsflaregen flare = $assetsflaregen();
  static const $assetsimagesgen images = $assetsimagesgen();
  static const $assetsjsongen json = $assetsjsongen();
  static const $assetsmoviegen movie = $assetsmoviegen();
  static const $assetsunknowngen unknown = $assetsunknowngen();
  static const $picturesgen pictures = $picturesgen();
}

class assetgenimage extends assetimage {
  const assetgenimage(string assetname)
      : _assetname = assetname,
        super(assetname);
  final string _assetname;

  image image({
    key key,
    imageframebuilder framebuilder,
    imageloadingbuilder loadingbuilder,
    imageerrorwidgetbuilder errorbuilder,
    string semanticlabel,
    bool excludefromsemantics = false,
    double width,
    double height,
    color color,
    blendmode colorblendmode,
    boxfit fit,
    alignmentgeometry alignment = alignment.center,
    imagerepeat repeat = imagerepeat.norepeat,
    rect centerslice,
    bool matchtextdirection = false,
    bool gaplessplayback = false,
    bool isantialias = false,
    filterquality filterquality = filterquality.low,
  }) {
    return image(
      key: key,
      image: this,
      framebuilder: framebuilder,
      loadingbuilder: loadingbuilder,
      errorbuilder: errorbuilder,
      semanticlabel: semanticlabel,
      excludefromsemantics: excludefromsemantics,
      width: width,
      height: height,
      color: color,
      colorblendmode: colorblendmode,
      fit: fit,
      alignment: alignment,
      repeat: repeat,
      centerslice: centerslice,
      matchtextdirection: matchtextdirection,
      gaplessplayback: gaplessplayback,
      isantialias: isantialias,
      filterquality: filterquality,
    );
  }

  string get path => _assetname;
}

class svggenimage {
  const svggenimage(this._assetname);

  final string _assetname;

  svgpicture svg({
    key key,
    bool matchtextdirection = false,
    assetbundle bundle,
    string package,
    double width,
    double height,
    boxfit fit = boxfit.contain,
    alignmentgeometry alignment = alignment.center,
    bool allowdrawingoutsideviewbox = false,
    widgetbuilder placeholderbuilder,
    color color,
    blendmode colorblendmode = blendmode.srcin,
    string semanticslabel,
    bool excludefromsemantics = false,
    clip clipbehavior = clip.hardedge,
  }) {
    return svgpicture.asset(
      _assetname,
      key: key,
      matchtextdirection: matchtextdirection,
      bundle: bundle,
      package: package,
      width: width,
      height: height,
      fit: fit,
      alignment: alignment,
      allowdrawingoutsideviewbox: allowdrawingoutsideviewbox,
      placeholderbuilder: placeholderbuilder,
      color: color,
      colorblendmode: colorblendmode,
      semanticslabel: semanticslabel,
      excludefromsemantics: excludefromsemantics,
      clipbehavior: clipbehavior,
    );
  }

  string get path => _assetname;
}

class flaregenimage {
  const flaregenimage(this._assetname);

  final string _assetname;

  flareactor flare({
    string boundsnode,
    string animation,
    boxfit fit = boxfit.contain,
    alignment alignment = alignment.center,
    bool ispaused = false,
    bool snaptoend = false,
    flarecontroller controller,
    flarecompletedcallback callback,
    color color,
    bool shouldclip = true,
    bool sizefromartboard = false,
    string artboard,
    bool antialias = true,
  }) {
    return flareactor(
      _assetname,
      boundsnode: boundsnode,
      animation: animation,
      fit: fit,
      alignment: alignment,
      ispaused: ispaused,
      snaptoend: snaptoend,
      controller: controller,
      callback: callback,
      color: color,
      shouldclip: shouldclip,
      sizefromartboard: sizefromartboard,
      artboard: artboard,
      antialias: antialias,
    );
  }

  string get path => _assetname;
}

fonts

just follow the doc use a custom font to specify fonts, then [fluttergen] will generate related dart files.
no other specific configuration is required.
ignore duplicated.

# pubspec.yaml
flutter:
  fonts:
    - family: raleway
      fonts:
        - asset: assets/fonts/raleway-regular.ttf
        - asset: assets/fonts/raleway-italic.ttf
          style: italic
    - family: robotomono
      fonts:
        - asset: assets/fonts/robotomono-regular.ttf
        - asset: assets/fonts/robotomono-bold.ttf
          weight: 700

these configurations will generate fonts.gen.dart under the lib/gen/ directory by default.

usage example

text(
  'hi there, i'm fluttergen',
  style: textstyle(
    fontfamily: fontfamily.robotomono,
    fontfamilyfallback: const [fontfamily.raleway],
  ),
example of code generated by fluttergen
/// generated code - do not modify by hand
/// *****************************************************
///  fluttergen
/// *****************************************************

class fontfamily {
  fontfamily._();

  static const string raleway = 'raleway';
  static const string robotomono = 'robotomono';
}

colors

[fluttergen] supports generating colors from xml format files.
ignore duplicated.

# pubspec.yaml
flutter_gen:
  colors:
    inputs:
      - assets/color/colors.xml
      - assets/color/colors2.xml

[fluttergen] can generate a color class based on the name attribute and the color hex value.
if the element has the attribute type, then a specially color will be generated.

currently supported special color types:

noticed that there is no official material color generation algorithm. the implementation is based on the mcg project.

<color name="milk_tea">#f5cb84</color>
<color name="cinnamon" type="material">#955e1c</color>
<color name="yellow_ocher" type="material material-accent">#df9527</color>

these configurations will generate colors.gen.dart under the lib/gen/ directory by default.

usage example

text(
  'hi there, i'm fluttergen',
  style: textstyle(
    color: colorname.denim,
  ),
example of code generated by fluttergen
/// generated code - do not modify by hand
/// *****************************************************
///  fluttergen
/// *****************************************************

import 'package:flutter/painting.dart';
import 'package:flutter/material.dart';

class colorname {
  colorname._();

  static const color black = color(0xff000000);
  static const color black30 = color(0x4d000000);
  static const color black40 = color(0x66000000);
  static const color black50 = color(0x80000000);
  static const color black60 = color(0x99000000);
  static const materialcolor crimsonred = materialcolor(
    0xffcf2a2a,
    <int, color>{
      50: color(0xfff9e5e5),
      100: color(0xfff1bfbf),
      200: color(0xffe79595),
      300: color(0xffdd6a6a),
      400: color(0xffd64a4a),
      500: color(0xffcf2a2a),
      600: color(0xffca2525),
      700: color(0xffc31f1f),
      800: color(0xffbd1919),
      900: color(0xffb20f0f),
    },
  );
  static const color gray410 = color(0xff979797);
  static const color gray70 = color(0xffeeeeee);
  static const color white = color(0xffffffff);
  static const materialcolor yellowocher = materialcolor(
    0xffdf9527,
    <int, color>{
      50: color(0xfffbf2e5),
      100: color(0xfff5dfbe),
      200: color(0xffefca93),
      300: color(0xffe9b568),
      400: color(0xffe4a547),
      500: color(0xffdf9527),
      600: color(0xffdb8d23),
      700: color(0xffd7821d),
      800: color(0xffd27817),
      900: color(0xffca670e),
    },
  );
  static const materialaccentcolor yellowocheraccent = materialaccentcolor(
    0xffffbca3,
    <int, color>{
      100: color(0xffffe8e0),
      200: color(0xffffbca3),
      400: color(0xffffa989),
      700: color(0xffff9e7a),
    },
  );
}

default configuration

the following are the default settings.
the options you set in pubspec.yaml will override the corresponding default options.

flutter_gen:
  output: lib/gen/
  line_length: 80
  null_safety: true

  integrations:
    flutter_svg: false
    flare_flutter: false

  assets:
    enabled: true
    package_parameter_enabled: false
    style: dot-delimiter
    
  fonts:
    enabled: true

  colors:
    enabled: true
    inputs: []

flutter:
  assets: []
  fonts: []

Download this source code for
5 USD


Download this source code for
5 USD


Download this source code for
5 USD


Download this source code for
5 USD

Top