웹용 Flutter를 초기화할 때 로드 중 표시를 표시하는 방법

8772 단어 flutter_webFlutter


Flutter 2.5.1 현재, Fluuter for Web의 디버그시에는 위의 gif와 같은 읽고 있는 인디케이터(로딩 화면)가 표시됩니다만, 현시점에서는 디버그시만으로 릴리스 빌드시에는 표시되지 않고, 표시시키는 옵션은 보입니다 아니.

릴리스 빌드 후, 현시점에서 초기 읽기 시간이 10초 정도 걸려 버리는 것은 자주 있는 것이므로, 릴리스시에도 디버그시와 같은 읽기중 표시를 내는 방법을 소개합니다.

(근본적인 문제인, main.dart.js 의 사이즈가 큰 문제나, 머티리얼 아이콘의 폰트 사이즈가 큰 문제에는 이번은 접하지 않습니다.

정책



읽는 중 인디케이터에는 여러 종류가 있습니다만, 이번은 실제로 디버그시에 사용되고 있는 것을 그대로 표시시키고 싶으므로, packages/flutter_tools/lib/src/web/bootstrap.dart 에 기재된 코드를 최대한 카피해 재이용합니다.

구현으로서는, 윈도우의 load 이벤트의 타이밍으로 인디케이터를 지우는 방법이 index.html을 괴롭히는 것만이므로 간단합니다만, 그것이라고 실제로 Flutter의 UI가 표시될 때까지 안내 래그가 크기 때문에, 이번은 Flutter의 main 함수가 불리는 타이밍에 사라지게 했습니다.

index.html



먼저 web/index.html 의 <body> 안에 다음을 추가합니다. (style과 script는 <head> 내에서도 괜찮습니다.)

index.html
<style type="text/css">
.flutter-loader {
    width: 100%;
    height: 8px;
    background-color: #13B9FD;
    position: absolute;
    top: 0px;
    left: 0px;
}
.indeterminate {
    position: relative;
    width: 100%;
    height: 100%;
}
.indeterminate:before {
    content: '';
    position: absolute;
    height: 100%;
    background-color: #0175C2;
    animation: indeterminate_first 2.0s infinite ease-out;
}
.indeterminate:after {
    content: '';
    position: absolute;
    height: 100%;
    background-color: #02569B;
    animation: indeterminate_second 2.0s infinite ease-in;
}
@keyframes indeterminate_first {
    0% {
        left: -100%;
        width: 100%;
    }
    100% {
        left: 100%;
        width: 10%;
    }
}
@keyframes indeterminate_second {
    0% {
        left: -150%;
        width: 100%;
    }
    100% {
        left: 100%;
        width: 10%;
    }
}
</style>

<script>
function flutterReady(){
    // console.log("flutter app is ready");
    var el = document.getElementsByClassName('loading')[0];
    if(el){ el.remove(); }
};
</script>

<div class="flutter-loader"><div class="indeterminate"></div></div>

main.dart



그런 다음 main.dart에 다음을 추가합니다.

main.dart
import 'package:flutter/foundation.dart' show kIsWeb;
import 'package:js/js_util.dart' as js_util;
import 'dart:html' as html;

void main(){
  if (kIsWeb) {
    if (js_util.hasProperty(html.window, "flutterReady")) {
      js_util.callMethod(html.window, "flutterReady", []);
    }
  }

  // runApp(App()); などメインの処理
}

이것으로 완성입니다. 그리고는 실제로 릴리스 빌드하면, 최초 로드시에만 인디케이터가 표시된다고 생각합니다. (만약 build 이하의 index.html가 재기입되어 있지 않은 경우는 web 이하로부터 카피하면 OK입니다.)

일단 이 병아리를 짜 버리면, index.html을 좋아하게 만지면서 자신이 좋아하는 로딩 화면을 낼 수도 있기 때문에, 뭔가 편리하다고 생각합니다.
[Flutter] 스타일의 copyWith는 좋지만 테마라면 조심해야 할 번거로운 이야기
cloud build 설정 방법 메모 쓰기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage