Flutter web app progress indicator before loading app?

Question

Hi I am a mobile app developer and not much familiar with web development, I was finding any approach to implement Progress Indicator before loading the flutter web app like Gma

Answer 1

In your question you mentioned

Any code implemented in flutter would be the part of flutter app and it won't work,...

I assume you tried to add the splash screen approach for android or IOS. Since flutter-web is simply an index.html and a couple of js files(for eg., main.dart.js), you should perhaps try the CSS loading animation trick. Since you didn't share any code I am not writing any code but the following would be my approach as explained by this red stapler video. He/she kindly provided a lot of CSS based animations here along with the codepen implementations for that.

So following would be my steps in the flutter_web_project\web\index.html file.

1. Add a span element in the body of index.html to show the css animation itself.
2. Create a div wrapper to position the span animation in your index.html.
3. Then listen to the onLoad event of the window and remove the div element from your page or fade it out as described in the video.