Generate dart file containing references to all assets and fonts available to app

Inspired on R.drawable.image_logo on native android platform.

Based on top of work done on #4890, it's independent of #18897 but highly related.

Copying my own comment from flutter/flutter-intellij#2378 (comment):

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.

I'm still interested in getting this done and I have something basic that will do for most projects. But I need feedback on how to gracefully degrade for all types of conflicts.

Ideas anyone?

What do you mean by gracefully degrade ? Generally on Android when you have a conflict it just doesn't compile anymore and give you an error message, why not do the same ?
I would like to see this append :) can we see your basic solution somewhere ?

I suggest adding folder support like: R.drawable.images.nature and if multiple files with same path, then R.drawable.images.nature.jpg or like a suffix R.drawable.images.nature_jpg.
With "images" being folder name

Similar to #11477

Or just add better support for build_runner so that people can write plugins to generate asset names, language strings, parsers, etc. and they will be built during flutter run.

@szotp

@szotp I stopped following the state of things for build_runner, but what you suggest is aligned with what I'd like to have

@jaumard
consider the following examples:
/assets/images/3.jpg
/assets/images/this.png
/assets/images/this.jpg
/assets/images/this.JPG
/assets/other/this.png

And assuming pubspec has an entry for assets/images and another for assets/other, how would you disambiguate things?

FYI I'm integrating build_runner support into the flutter tool, so if you're interested I suggest you follow/thumbs up #27141

@fmatosqg

@fmatosqg for me those shouldn't compile and throw an "ambiguous" error for the user to rename those
consider the following examples:

/assets/images/3.jpg
/assets/images/this.png
/assets/images/this.jpg
/assets/images/this.JPG

but if they are under another folder like /assets/other/this.png for me should be ok to have something like Assets.other.this and Assets.images.this this is a wrong example as it's a reserved keywords but you get it ^^

@jonahwilliams

@jonahwilliams that's very good news for a whole host of reasons :) I've wanted that since hearing how build_runner works.

Anyone started working on this already? Flutter really needs something like https://github.com/mac-cain13/R.swift.

@timfreiheit

Update: I found a package named r_flutter which actually does what this issue asked for, but it didn't use new build config.

I updated it to use new flutter code generation, and I have a working version on my fork: https://github.com/szotp/r_flutter
It generates asset names, font names and localization keys (thanks to @timfreiheit original work), and it automatically updates itself on changes.

EDIT: My changes got merged. r_flutter package does exactly what was asked in this issue, IMO it can be closed.

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:

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:
Flr CLI Version
- GitHub: https://github.com/Fly-Mix/flr-cli
- CLI Homepage: https://rubygems.org/gems/flr
- flr-cli Usage Example Gif:
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:

@YK-Unit

@YK-Unit Thank you and your team for the amazing work.
I will try it.
Thanks so much!

@YK-Unit

@YK-Unit Thank you and your team for the amazing work.
I will try it.
Thanks so much!

I wrote a simple package to do that in simplest way possible... with build_runner 🥳

Here's a detailed article on medium https://medium.com/@ishaqhassan/indexing-assets-in-a-dart-class-just-like-r-java-flutter-3febf558a2bb

As well as the package page on pub https://pub.dev/packages/assets_indexer

Hope it helps the devs ❤️

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Generate dart file containing references to all assets and fonts available to app #18898

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Generate dart file containing references to all assets and fonts available to app #18898

Description

Activity

fmatosqg commented on Jun 28, 2018

fmatosqg commented on Nov 19, 2018

jaumard commented on Jan 3, 2019

mare011 commented on Jan 3, 2019

zoechi commented on Jan 21, 2019

szotp commented on Mar 9, 2019

fmatosqg commented on Mar 12, 2019

jonahwilliams commented on Mar 12, 2019

jaumard commented on Mar 12, 2019

fmatosqg commented on Mar 14, 2019

szotp commented on Aug 21, 2019

szotp commented on Aug 25, 2019

YK-Unit commented on Feb 26, 2020

quangson91 commented on Feb 26, 2020

ishaquehassan commented on May 10, 2021

github-actions commented on Jul 11, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions