How to build web file?

[fengxuway]

I want to run finamp in browse, but run flutter build web got error: "Missing index.html", how to fix it?

[fengxuway]

Explain the use case.

I want to run finamp on Tesla's car. Although it does not support independent app installation, I hope to deploy a web container + finame on my home nas, so that I can access it on the car browser.

[fengxuway]

mark the steps.

first, add web platform support to the project, then build web

flutter create --platforms=web .

flutter build web

[fengxuway]

build got error: The method 'hashValues' isn't defined for the class 'SliverStickyHeaderState'

two dependences lib must update hashValues function name to Object.hash() function. I fork it and fix:

add these dependence by git to file: pubspec.yaml - sectoin: dependencies:

  flutter_slidable:
    git:
      url: https://github.com/letsar/flutter_slidable.git
      ref: master
  flutter_sticky_header:
    git:
      url: https://github.com/fengxuway/flutter_sticky_header.git
      ref: test
  value_layout_builder:
    git:
      url: https://github.com/fengxuway/value_layout_builder.git
      ref: master

[fengxuway]

build success!

Font asset "CupertinoIcons.ttf" was tree-shaken, reducing it from 257628 to 1172 bytes (99.5% reduction). Tree-shaking can be disabled by providing the --no-tree-shake-icons flag when building your app.
Font asset "MaterialIcons-Regular.otf" was tree-shaken, reducing it from 1645184 to 13888 bytes (99.2% reduction). Tree-shaking can be disabled by providing the --no-tree-shake-icons flag when building your app.
Compiling lib/main.dart for the Web...                             29.1s

$ tree build/web
build/web
├── assets
│   ├── AssetManifest.bin
│   ├── AssetManifest.bin.json
│   ├── AssetManifest.json
│   ├── FontManifest.json
│   ├── NOTICES
│   ├── fonts
│   │   └── MaterialIcons-Regular.otf
│   ├── images
│   │   └── finamp.png
│   ├── packages
│   │   └── cupertino_icons
│   │       └── assets
│   │           └── CupertinoIcons.ttf
│   └── shaders
│       └── ink_sparkle.frag
├── canvaskit
│   ├── canvaskit.js
│   ├── canvaskit.js.symbols
│   ├── canvaskit.wasm
│   ├── chromium
│   │   ├── canvaskit.js
│   │   ├── canvaskit.js.symbols
│   │   └── canvaskit.wasm
│   ├── skwasm.js
│   ├── skwasm.js.symbols
│   ├── skwasm.wasm
│   └── skwasm.worker.js
├── favicon.png
├── flutter.js
├── flutter_bootstrap.js
├── flutter_service_worker.js
├── icons
│   ├── Icon-192.png
│   ├── Icon-512.png
│   ├── Icon-maskable-192.png
│   └── Icon-maskable-512.png
├── index.html
├── main.dart.js
├── manifest.json
└── version.json

[fengxuway]

But got error when access the web.

I run http server for build/web directory:

cd build/web

python -m SimpleHTTPServer 8000

then open browse http://127.0.0.1:8000 got the error:

[fengxuway]

How to fix it, please help me

[fengxuway]

https://stackoverflow.com/questions/74368262/how-to-use-getapplicationdocumentsdirectory-with-flutter-for-web

replace getApplicationDocumentsDirectory to static string dir, then got another error:

[Chaphasilor]

The error seems to be related to image asset loading, e.g. the Finamp logo in the drawer/menu or on the login screens. Take a look at this StackOverflow question

Assets need to be loaded via their URL directly, instead of convertig the URL to a File object first.
I assume the issue are these images here:
https://github.com/jmshrv/finamp/blob/redesign/lib%2Fcomponents%2FLoginScreen%2Flogin_splash_page.dart#L27-L31

There are multiple locations in the code where images are loaded like this, you'll have to search for them :)

[fengxuway]

Thanks for your reply, but it is not necessary. I recently tried to use jellyfin web to run in Tesla browser, but it stopped playing after only one song. The music control button cannot control the media played in the browser. Even compiling finamp web should have a similar effect and cannot solve my problem. Unless Tesla officially releases a native jellyfin or finamp client.

[fengxuway]

[Chaphasilor]

Hmm. Do other sites have the same issue? Like Spotify Web or YouTube?