preface

As a Flutter developer, if you’re worried about how to quickly and easily add declarations to multiple image, text, or font resources in pubspec.yaml, or how to simply and safely reference resources in your code, now you can solve these problems simply — as long as you use Flr.

Introduction of Flr

Flr, pronounced Flutter-R, is a development tool for managing Flutter resources developed by the Netease Yan Xuanzhi Manufacturing team.

Flr can help Flutter developers automatically add declarations to Pubspec. yaml and generate R.G. Art files after modifying project resources. With THE help of R.G. Art, Flutter developers can apply resources in their code using the resource ID function, for example:

import 'package:flutter_r_demo/r.g.dart';

// test_sameName.png
var normalImageWidget = Image(
  width: 200,
  height: 120,
  image: R.image.test_sameName(),
);

// test_sameName.gif
var gifImageWidget = Image(
  image: R.mage.test_sameName_gif(),
);

// test.svg
var svgImageWidget = Image(
  width: 100,
  height: 100,
  image: R.svg.test(width: 100, height: 100));// test.json
var jsonString = await R.text.test_json();

// test.yaml
var yamlString = await R.text.test_yaml();

// Amiri Font Style
var amiriTextStyle = TextStyle(fontFamily: R.fontFamily.amiri);
Copy the code

Flr features

To date, Flr has supported the following features:

  • Support “automatically add resource declaration topubspec.yamlAnd automatic generationr.g.dartFile, which can be triggered manually or by monitoring resource changes
  • supportR.x(e.g.,R.image.test().R.svg.test(width: 100, height: 100).R.txt.test_json()) code structure
  • Support processing of image resources (.png,.jpg,.jpeg,.gif,.webp,.icon,.bmp,.wbmp,.svg ）
  • Support for processing text resources (.txt,.json,.yaml,.xml)
  • Support for processing font resources (.ttf,.otf,.ttc)
  • Support for processing image resource variations
  • Resources that support handling bad-smelling file names:
    • File names with illegal characters, such as Spaces,~,#(Illegal characters are characters that are not in the legal character set; The characters in the legal character set are:0-9,A-Z,a-z,_,+,-,.,,,!,@,&,$,RMB)
    • The file name is a number or_or$The beginning of the character
  • Supports processing of resources with the same file name but different paths

Flr tools

To better meet the needs of Flutter developers, we provide the following three versions of the Flr tools:

  1. Flr Android Studio Plugin version

    • Making: github.com/Fly-Mix/flr…

    • The Plugin Homepage: plugins.jetbrains.com/plugin/1378…

    • flr-as-plugin Usage Example Gif:

  2. Flr CLI version

    • Making: github.com/Fly-Mix/flr…

    • CLI Homepage: rubygems.org/gems/flr

    • flr-cli Usage Example Gif:

  3. Flr VSCode Extension version

    • Making: github.com/Fly-Mix/flr…

    • The Extension Homepage: marketplace.visualstudio.com/items?itemN…

    • flr-vscode-extension Usage Example:

Finally, it is hoped that this tool can help all Flutter developers improve their Flutter development efficiency. If you have any questions, please contact us via GitHub or email.