flutter web app deployed on github.pages cannot access SOME assets

Question

[UPDATED checkout the issue with steps on github ]

running my flutter web app locally

flutter run -d chrome --dart-define=FLUTTER_WEB_USE_SKIA=true --release

works as intended (video), but building it and deploying it to github pages (here)

flutter_master build web --dart-define=FLUTTER_WEB_USE_SKIA=true --release

doesn't access some asset, but successfully access others.

---

I've tried these solutions (one, two)

'about.json' works as expected locally but fails to load when deployed

while 'assets/about.json' doesn't work in either cases

the code in use can be simplified as

rootBundle.loadString('about.json');

---

I double-checked pubspec.yaml

flutter:
  uses-material-design: true
  assets:
    - background_portrait.jpg
    - background_landscape.jpg
    - yf_icon_black.png
    - yf_logo.png
    - about.json
    - apps.json
    - news.json
    - opensource.json

and the assets in the build folder

everything checks out, but the issue still persists

in these logs you can see that those files are present

Solution

What worked for me was to eliminate the assets folder completely. I created a folder for each of my asset types in the root dir (same level as lib) and referenced them as directories in pubspec.yaml:

  assets:
    - json/
    - avatars/ 

Then when loading them I used a relative path as:

await rootBundle.loadString('json/structure.json');

Flutter creates an assets folder during build and copies all my asset directories into it. This way it worked for me to load the assets both in debug and in release mode on GitLab Pages.

EDIT: I include the gitlab.ci.yml file I use for gitlab pages build pipeline

image: registry.gitlab.com/famedly/containers/flutter-dockerimages:beta
pages:
  script:
    - flutter clean
    - flutter config --enable-web
    - flutter pub get
    - flutter build web --release
    - ls build/web
    - cp -r build/web public
    - ls public
  artifacts:
    paths:
      - public
  only:
    - master

The ls commands you do not need these were just for logging the output during development of the script. I left them there because they do no harm and could come handy sometime.

Comments

[Tirth Patel]

This is a known issue when that switch/flag is used for building release build. I've read it on one of GitHub issue but can't remember the which one.

[Francesco Iapicca]

I already use a very similar structure, instead of "json" I called it "data", but otherwise is identical... I have the feeling that build just does not copy the assets in the build folder...

[Daniel Leiszen]

you can check that locally with flutter build web --release command, I edited my answer and included the gitlab.ci.yml I use for build

[Francesco Iapicca]

shouldn't flutter run -d chrome --release provide the same experience of running the deployed version?

[Francesco Iapicca]

I've updated the question, now it shows the logo, but doesn't load json assets

[Daniel Leiszen]

glad to hear 😀