flutter

flutter webでローディング画面を出す

2020/04/08

Introduce

最近はflutter頑張ってます.
flutter webでランディングページを作っているのですが,ページの読み込みが遅く画面が真っ白な状態が5秒ほどあります.
ユーザビリティが悪いので,ローディング画面を表示していきます.

Environment

  • MacOS Catalina 10.15.1
  • flutter --version
    Flutter 1.15.4-pre.240 • channel master • https://github.com/flutter/flutter.git
    Framework • revision 32b17974ea (28 hours ago) • 2020-02-29 06:41:00 -0500
    Engine • revision 755e2b559d
    Tools • Dart 2.8.0 (build 2.8.0-dev.10.0 09bbd3cca5)
  • Visual Studio Code

Usage

仕組みとしてはindex.htmlでローディングアイコンを表示させて,flutterのmain.dart.jsが呼ばれた時点で,index.htmlのアイコンを消します.

index.htmlにfontawesomeのspinnerアイコンを表示させて回転させるようにします.

index.html:html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<title>A space</title>
<style type="text/css">
#loader {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#loader h1 {
color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: 32px;
line-height: normal;
}
</style>
</head>
<body>
<div id="loader">

<h1>
<!-- website is loading... -->

<p><i class="fas fa-spinner fa-spin"></i></p>

<pre><code></h1>
</code></pre>

</div>

<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

<pre><code><br />flutterのmain.dart.jsが呼ばれた最初の処理でアイコンを消す処理を入れます.

main.dart:dart
void main() {
Future.delayed(Duration(seconds: 2), () {
querySelector("#loader").remove();
runApp(MyApp());
});
}

これでページの表示時にローディングアイコンが表示されます.

Reference

index.html
GitHub Gist: instantly share code, notes, and snippets.

-flutter
-

Translate »