FlutterKaigi/2023

[Improve]: Flutterのコンテンツが表示されるまでの数秒間白い画面が表示される。

Closed this issue · 3 comments

a-skua commented

Describe

読み込んで最初に数秒間白いページが表示されるのが少々気になります。
FlutterKaigi 2023のテーマカラーやロゴの表示を検討しても良いかもしれないです。

Screenshots

Web Embeddedの活用でこう言った制御ができるようになっています。
Screen Recording 2023-08-02 at 0 17 11

  1. HTMLコンテンツの表示(この時Flutterを描画する要素は opacity: 0)
  2. Flutterコンテンツが読み込み終わったことをJSに通知
  3. JSがopacity: 1に変更する

Environment

  • Device: all
  • OS: all
  • Browser: all
  • Version: all
  • Commit SHA: -

Additional context

上記サンプル、こちらに置いているのでよければ参考に。
https://a-skua.github.io/example-flutter-web/

blendthink commented

Issue 作成ありがとうございます！
まずはデザイン調整進めさせていただきます 🙏

  • 👍1
blendthink commented

デザイナーさんと相談して、描画に１〜３秒程度かかっているため Circular progress indicator で対応することになりました 🙆‍♂️

カラーは↓でお願いします！

  • Progress Bar: primary: Color(0xFFD0BCFF)
  • 背景色: onSecondaryContainer: Color(0xFF1D192B)
  • 🎉1
a-skua commented

こちら着手します〜

  • ❤️2