Search code examples
fluttergithub-pagesassetsflutter-web

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


[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.