[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
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.
The official flutter documentation explains that the assets should be added relative to the path of pubspec.yaml
For your example of pubspec.yaml, you should either move the asset files in the root of you project folder or if they are located in an assets sub folder add the name of that sub folder in pubspec.yaml
E.g. if your files are located under project_path/assets/, the assets section of your pubspec.yaml should look something like:
flutter:
uses-material-design: true
assets:
- assets/background_portrait.jpg
- assets/background_landscape.jpg
- assets/yf_icon_black.png
- assets/yf_logo.png
- assets/about.json
- assets/apps.json
- assets/news.json
- assets/opensource.json
In your dart code, assets should be accessed by their specified key, for the above example use 'assets/about.json' and not 'about.json'
Its an old thread - just in case someone stumbles upon...you have to ensure that a valid certificate is in place. Otherwise the service worker will not start.
Related
Flutter 3.3.9
I created a flutter project and I reference it as a dependency in another flutter project like so:
dev_dependencies:
flutter_test:
sdk: flutter
my_utils:
path: ../my_utils
When I added the local package to my project initially, I could see and debug the referenced local package just fine. I made updates to the my_utils package, did a "flutter pub get" in the project referencing my_utils, and the changes are not being picked up.
I added a new class to my_utils and it is not finding it in the other project.
I have this in analysis_options.yaml:
include: package:flutter_lints/flutter.yaml
linter:
rules:
depend_on_referenced_packages: false
Setting depend_on_referenced_packages to true didn't help.
How do I make my changes/updates in my_utils show in my referencing project?
Thanks
did you export the files properly ? e.g files inside src/?
my_utils file structure should be like the following:
lib/
...src/
......my_impl.dart
...my_utils.dart
and in your my_utils.dart should contain the following:
export 'src/my_impl.dart';
I recommend you use melos for managing multi-package projects. it might solve your problem. Also with melos bootstrap, you get flutter pub get running in all packages with one command.
you can follow the installation from here
I found this link
https://github.com/flutter/flutter/issues/32540#issuecomment-491498679
and tried out the fix but sadly it didn't work for me.
Hoping you can help!!
Thanks
also I'm using aws amplify hosting using this setting
version: 1
frontend:
phases:
preBuild:
commands:
- git clone https://github.com/flutter/flutter.git -b stable --depth 1
- export PATH="$PATH:`pwd`/flutter/bin"
# IMPORTANT - Please verify your build commands
build:
commands:
- flutter build web -t ./lib/main.dart
artifacts:
# IMPORTANT - Please verify your build output directory
baseDirectory: build/web
files:
- '**/*'
cache:
paths: []
Flutter web doesn't support images of SVG format. Please use png instead.
I'm trying to publish my flutter page on gitlab which is the git host of my project. I'm using the ci configure like the following(from this post)
gitlab page CI configure
image: cirrusci/flutter:latest
before_script:
- flutter channel stable
- flutter upgrade
- flutter config --enable-web
- flutter pub get
pages:
stage: deploy
script:
- flutter build web
- cp -r build/web public
artifacts:
paths:
- public
only:
- live
The ci job failed in an error like:
...
$ flutter channel stable
Switching to flutter channel 'stable'...
git: fatal: 'origin/stable' is not a commit and a branch 'stable' cannot be created from it
Switching channels failed with error code 128.
...
What's the problem?
One thing worth to note is my flutter project locate in a subdirectory(ie., my-flutter-dir) of the repository root. Is it the reason? How to configure the CI script in this situation?
I've tried to add a cd my-flutter-dir as the first command in the before_script, but it still result in the same error.
It's turn out being an issue of the docker image. After I removed the flutter channel and flutter upgrade command in the befor_script part, everything is ok now.
Note if you have the flutter project in a subdirectory under the repository root, still you need to add cd you-flutter-dir command in the before_script. Also don't forget to put the .gitlab-ci.yml file in the root of the repository.
I installed flutter_dotenv with this command:
flutter pub add flutter_dotenv
My is pubspec.yaml is like:
dependencies:
flutter:
flutter_dotenv: ^5.0.0
flutter:
assets:
- .env
Then I put .env file in the project root (I will use .env.dev. .env.prd later so you see them in the screen shot):
I run project from VSCode then get FileNotFoundError:
I checked the .env file location hundred of times, tried to change the file name, change the location to /lib etc - still no luck. Any idea?
I found what was wrong. "assets:" must be under "flutter:", so tab is necessary before "assets:". That's it!
flutter:
assets:
- .env
I have the following simple directory structure:
flutter_published
.idea
android
build
ios
lib
main.dart
flutter_published.iml
pubspec.lock
pubspec.yaml
network_to_file_image
.idea
example
main.dart
lib
network_to_file_image.dart
test
network_to_file_image.iml
pubspec.lock
pubspec.yaml
network_to_file_image is a package.
There are two main.dart files, one at flutter_published/lib/main.dart and
another at flutter_published/network_to_file_image/example/main.dart
I am able to run the first one, but not the one inside of the example directory under network_to_file_image. The second one gives me this error:
Launching example\lib\main.dart on Android SDK built for x86 in debug mode...
No application found for TargetPlatform.android_x86.
Is your project missing an android\AndroidManifest.xml?
Consider running "flutter create ." to create one.
Also, when the app is generated, what happens to the example and test directories of the packages I use? Are they included or removed from the final app that is deployed?
To solve this, instead of the main.dart file inside of the example directory, you need to create a complete Flutter application-type project inside of the example directory. Then, the example tab will point to the README.md file inside of that directory.
That example directory will have its own lib directory, containing a main.dart file. Since that file is now inside of an application-type directory it can be run.
Visit this repo to see how it works:
https://github.com/marcglasberg/async_redux/tree/master/example
Update:
To be clear, the example's pubspec.yaml file can reference its package by using a relative reference. For example, here is the dependencies section of the example dir of the async_redux package I mentioned:
dependencies:
http: ^0.13.1
async_redux:
path: ../
flutter:
sdk: flutter
Since the example dir is at the same level as the package's pubspec.yaml file, then the example's own pubspec.yaml is one level below it. Thus, it may reference the package itself by using a ../ path:
async_redux:
path: ../
example/main.dart only exists to be shown in https://pub.dartlang.org/packages/network_to_file_image#-example-tab-
The pub site is limited in how it finds content in the example directory to display in the Example tab.
cd to the directory and execute flutter create .. You should be able to run it afterwards
Go to the example folder of the repository of the package.
Open the lib folder and go to the main.dart file.
Above the void main() function, you can see the Run|Debug|Profile (pic below), click on the one you want to run the project as.
The example app will now run in your emulator.
The screenshot below is of the chewie package available on pub.dev