Flutter-intellij: Generate assets reference in the pubspec manifest (like R.java in android)

[quangson91]

Currently, we have to manual define the assets reference.
Eg:

final logo = "assets/images/logo.png"

For small resource -> ok. But if we have many resources => it would be good if we can generate those references. (Look likes R.java in android world).

[devoncarew]

Just to clarify, do you mean the assets in use by this plugin, or for user code?

[quangson91]

I mean for the user code (in flutter project).

[quangson91]

For example, in android we put resource image (logo.png) in drawable folder.
The android studio will auto-generate R.java file then we have references R.drawable.logo

[devoncarew]

Makes sense.

We do have validation of the manifest section currently, but could use additional automation here.

[quangson91]

Yeap. I got it.

[zoechi]

I'd assume this to be covered by flutter/flutter#16413

[quangson91]

@zoechi I think this is different.
https://github.com/flutter/flutter/pull/16413 => about including all assets by the given folder.

This issue is an extra step.
After we scan the access -> we should generate an R.dart file which including references to the resource.

Example for this case:
https://github.com/fmatosqg/flutter_problem/blob/variants_PR_16413/lib/main.dart#L105

Instead write: 'assets/ic_error_outline_black_36dp.png',
We can use generate source R.dart like: R.image.ic_error_outline_black

R.dart is a source code file -> it can be autocomplete by the IDE.

[quangson91]

Also, one more feature relates to generating R.dart is when user click to a reference (eg. R.image.logo) we can open dirrectly the image logo.png.

[zoechi]

@quangson91 I missed that part. Great idea.

[fmatosqg]

I have plans to roll this feature. Inspired by R.drawable but not exactly. Something is already done, and tapping from the assets scan mentioned above which was written as part of https://github.com/flutter/flutter/issues/4890. I'd be glad to share my current branch, which works but needs some polishing.

There are some challenges though:
a) since android restricts the allowed filenames it's much easier to generate field names accessible in java. Flutter accepts any filename which makes it quite tricky to handle for example filenames composed of characters such as emojis, @ or [.
b) android gracefully handles collisions by overwriting assets when a conflict is found. In flutter we'll have collisions for files coming from different folders, different extensions, and more so for the forbidden characters as mentioned in the point above.

a is tricky but can be tackled, but b needs a lot of thinking on how the developer will access different files with different filenames that would naively map to the same class+field on generated code.

[quangson91]

@fmatosqg, IMO I think to restrict/standard folder/file name as android is ok.

[fmatosqg]

I'd be ok with that too, but the flutter team don't agree. When I submitted the PR for above ticket we had to make sure multiple folders are supported. Also it would break compatibility if we went that way.

What limits getting this ticket done is actually a good idea of what API would be autogenerated for devs.

I should create a ticket to discuss / implement it by tomorrow, I hope this helps create some specs.

[quangson91]

Yes, that will be great.

[fmatosqg]

this ticket should be done on https://github.com/flutter/flutter/issues/18898, I suggest closing it here since the intellij plugin is not the best place to implement it.

[jaumard]

Would like to see the same kind of generation for internationalization (like R.string in android) :)

[stevemessick]

Closing this since it is covered in https://github.com/flutter/flutter/issues/18898

[YK-Unit]

Hi, all:

I'm a member of Fly-Mix Team from NetEase company. My team did develop a flutter development tool: Flr(Flutter-R) to support the feature that you want.

Flr is a flutter resource manager tool, which can help flutter developer to auto specify assets in pubspec.yaml and generate r.g.dart file which likes R.java in Android after he changes the flutter project assets. With r.g.dart, flutter developer can apply the asset in code by referencing it's asset ID function, such as:

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();

PS: yes, it is just like the AAPT(Android Asset Packaging Tool) in Android.

Up to now, Flr has supported Android Studio Plugin, CLI, and VSCode Extension:

1. Flr Android Studio Plugin Version

   • GitHub: https://github.com/Fly-Mix/flr-as-plugin

   • Plugin Homepage: https://plugins.jetbrains.com/plugin/13789-flr

   • flr-as-plugin Usage Example Gif:

     

2. Flr CLI Version

   • GitHub: https://github.com/Fly-Mix/flr-cli

   • CLI Homepage: https://rubygems.org/gems/flr

   • flr-cli Usage Example Gif:

     

3. Flr VSCode Extension Version

   • GitHub: https://github.com/Fly-Mix/flr-vscode-extension

   • Extension Homepage: https://marketplace.visualstudio.com/items?itemName=LincolnLaw.flr

   • flr-vscode-extension Usage Example: