DEV Community

Daichi Furiya
Daichi Furiya

Posted on • Updated on

The Flutter code generator for your assets, fonts, colors, … — Get rid of all String-based APIs.

#flutter #dart #ios #android

Hey guys, We created the FlutterGen.

It's a Flutter code generator for your assets, fonts, colors, … — Get rid of all String-based APIs.

Inspired by SwiftGen.

Motivation.

Using asset path string directly is not safe.

# pubspec.yaml
flutter:
  assets:
    - assets/images/profile.jpg
Enter fullscreen mode Exit fullscreen mode

❌ 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
Enter fullscreen mode Exit fullscreen mode

⭕️ Good

We want to use it safely.

Widget build(BuildContext context) {
  return Assets.images.profile.image();
}
Enter fullscreen mode Exit fullscreen mode

Installation

Run fluttergen after the configuration pubspec.yaml.

Use this package as an executable

Using a Homebrew Formula

  1. Install FlutterGen 
$ brew install FlutterGen/tap/fluttergen
Enter fullscreen mode Exit fullscreen mode
  1. Use FlutterGen 
$ fluttergen -h

$ fluttergen -c example/pubspec.yaml
Enter fullscreen mode Exit fullscreen mode

Using a Dart command-line

  1. Install FlutterGen 
$ pub global activate flutter_gen

$ export PATH="$PATH":"$HOME/.pub-cache/bin"
Enter fullscreen mode Exit fullscreen mode
  1. Use FlutterGen 
$ fluttergen -h

$ fluttergen -c example/pubspec.yaml
Enter fullscreen mode Exit fullscreen mode

Use this package 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:
Enter fullscreen mode Exit fullscreen mode
  1. Install FlutterGen 
$ flutter pub get
Enter fullscreen mode Exit fullscreen mode
  1. Use FlutterGen 
$ flutter packages pub run build_runner build
Enter fullscreen mode Exit fullscreen mode

Configuration file

FlutterGen generates dart files based on the key flutter and flutter_gen of pubspec.yaml.

# pubspec.yaml
# ...

flutter_gen:
  output: lib/gen/ # Optional (default: lib/gen/)
  lineLength: 80 # Optional (default: 80)

  integrations:
    flutter_svg: 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
Enter fullscreen mode Exit fullscreen mode

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
    - pictures/ocean_view.jpg
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode 
Widget build(BuildContext context) {
  return Assets.images.icons.paint.svg(
    width: 120,
    height: 120
  );
}
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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],
  ),
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

FlutterGen generates MaterialColor class
if the element has the attribute type="material", otherwise a normal Color class will be generated.

<color name="milk_tea">#F5CB84</color>
<color name="cinnamon" type="material">#955E1C</color>
Enter fullscreen mode Exit fullscreen mode

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,
  ),
Enter fullscreen mode Exit fullscreen mode

Conclusion

We are looking for co-developers. 😃

Top comments (0)

Read next

dhanush17tech profile image

Power your Flutter App with Gemini AI ✨

Dhanush Vardhan -

honeykeys profile image

Why I Switched my Personal Computer to Linux

Karl -

shey profile image

Implementando Infinite Scroll Pagination com Riverpod

Leticya Sheyla -

mteheran profile image

Free Books for Flutter Developers

Miguel Teheran -