flutter-gen 2.2.0

A code generator for Flutter

The Flutter code generator for your assets, fonts, colors,… to increase your productivity.

Inspired by FlutterGen.

Installation

Python

Window

$ https://www.python.org/downloads/

Mac OS

$ brew install python3

FlutterGen

Works with MacOS and Windows.

Window

$ pip install flutter_gen

Mac OS

$ pip3 install flutter_gen

Update via command line:

$ pip3 install -U flutter_gen

Usage

Run flutter_gen after the configuration pubspec.yaml.

$ flutter_gen -h

$ flutter_gen watch

Android Studio Plugin

• Install Plugin

Configuration file

FlutterGen generates dart files based on the key flutter of pubspec.yaml.
Default configuration can be found here.

# pubspec.yaml
# ...
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

These configurations will generate images.g.dart under the lib/generated/ directory by default.

Usage Example

FlutterGen generates Image class if the asset is Flutter supported image format.

Example results of assets/images/chip.jpg:

• Images.chip is an implementation of AssetImage class.
• Images.chip.image(...) returns Image class.
• Images.chip.path just returns the path string.

Widget build(BuildContext context) {
  return Image(image: R.images.chip);
}

Widget build(BuildContext context) {
  return R.images.chip.image(
    width: 120,
    height: 120,
    fit: BoxFit.scaleDown,
  );

Widget build(BuildContext context) {
  // Images.chip.path = 'assets/images/chip3/chip3.jpg'
  return Image.asset(R.images.chip.path);
}

If you are using SVG images with flutter_svg you can use as:

Widget build(BuildContext context) {
  return R.images.paint.svg(
    width: 120,
    height: 120
  );
}

Example of code generated by FlutterGen

/// DO NOT EDIT. This is code generated via flutter_gen

import 'package:flutter/widgets.dart';
import 'package:flutter_svg/flutter_svg.dart';

const _assetsImagePath = 'assets/images';

class Images {
  static AssetGenImage get chip => const AssetGenImage('$_assetsImagePath/chip.png');
  static SvgGenImage get paint => const SvgGenImage('$_assetsImagePath/paint.svg');
}

class AssetGenImage extends AssetImage {
  const AssetGenImage(String assetName) : super(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;
}

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.g.dart under the lib/generated/ directory by default.

Usage Example

Text(
  'Hi there, I\'m FlutterGen',
  style: TextStyle(
    fontFamily: R.fonts.robotoMono,
    fontFamilyFallback: const [R.fonts.raleway],
  ),

Example of code generated by FlutterGen

/// DO NOT EDIT. This is code generated via flutter_gen

class FontFamily {
  FontFamily._();

  static const String raleway = 'Raleway';
  static const String robotoMono = 'RobotoMono';
}

Colors

FlutterGen supports generating colors from TXT format files.
Ignore duplicated.

FlutterGen can generate a Color class based on the color hex value.

#F5CB84
#955E1C

These configurations will generate colors.g.dart under the lib/generated/ directory by default.

Usage Example

Text(
  'Hi there, I\'m FlutterGen',
  style: TextStyle(
    color: R.colors.hexF5CB84,
  ),

Example of code generated by FlutterGen

import 'package:flutter/material.dart';

class ColorName {
  ColorName._();
  
  static const Color hexF5CB84 = Color(0xFFF5CB84);
  static const Color hex955E1C = Color(0xFF955E1C);
}

Issues

Please file FlutterGen specific issues, bugs, or feature requests in our issue tracker.