はじめに
Flutter Webは読み込みが遅いのでスプラッシュ画面をアニメーション付きで実装したかったのですが静的なスプラッシュしか見つからなかったので今回実装してみました。
ЯiLoIのウェブサイトはここで紹介している方法にてスプラッシュを作成しています！！もしよかったら参考に見てみてください！！
アニメーションをつけない場合
スプラッシュ画面にアニメーションがいらないという人もいそうなのでまずはアニメーションなしのスプラッシュ画面の設定の仕方を紹介していきます。
使うのはFlutter_native_splashというパッケージです。
pubspec.yamlにFlutter_native_splashを追加し一番下に以下のようにスプラッシュ画面の設定を記入します。
flutter_native_splash:
color: '#ffffff'
image: 'web/icons/Icon-maskable-192.png'
web: true記入が終わったら以下のコマンドで設定することができます。
flutter pub run flutter_native_splash:createアニメーションがいらない場合はこれで終了です。
アニメーションをつける場合
アニメーションをつける場合はいい感じのパッケージが見つからなかったので直接index.htmlに記入して設定していきます。
まずは画像を表示するタグを設定していきましょう。
bodyのすぐ下にdivとpictureを書きます。
<div id="loading">
<picture>
<source type="image/webp" media="(prefers-color-scheme: light) and (min-width: 750px) and (min-height: 600px)" srcset="icons/icon-black-512.webp">
<source type="image/webp" media="(prefers-color-scheme: light)" srcset="icons/icon-black-192.webp">
<source type="image/webp" media="(prefers-color-scheme: dark) and (min-width: 750px) and (min-height: 600px)" srcset="icons/icon-white-512.webp">
<source type="image/webp" media="(prefers-color-scheme: dark)" srcset="icons/icon-white-192.webp">
<img src="icons/icon-white-192.webp" alt="Now Loading" />
</picture>
</div>今回は画像を全てwebpで書いているのと二種類のサイズとテーマによって画像を変えているのでこのようになりました。
次はスタイルシートでアニメーション等を設定していきます。
<style>
@media (prefers-color-scheme: light) {
:root {
--main-color: #dbdbdb;
}
}
@media (prefers-color-scheme: dark) {
:root {
--main-color: #242424;
}
}
body {
inset: 0; overflow: hidden;
margin: 0; padding: 0;
position: fixed;
background-color: var(--main-color);
}
#loading {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
width: 100%;
}
#loading img {
animation: loading 1s infinite;
transition: opacity .4s;
}
#loading.done img {
animation: .33s ease-in-out 0s 1 forwards done;
opacity: .05;
}
@keyframes loading {
0% {
transform: rotateY(0deg) scale(0.9);
}
50% {
transform: rotateY(360deg) scale(1.1);
}
100% {
transform: rotateY(720deg) scale(0.9);
}
}
@keyframes done {
0% {
transform: scale(1)
}
100% {
transform: scale(10)
}
}
</style>Keyframeでloadingとdoneのアニメーションを書いています。
次はloadingとdoneを呼び出す処理を書いていきましょう。
下の方にあるScriptタブの中に書いていきます。コメントがあるところが追記したところですね。
<script>
window.addEventListener('load', function(ev) {
var loading = document.querySelector('#loading'); //定義する
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function(engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function(appRunner) {
loading.classList.add('done'); //完了処理を呼び出す
return appRunner.runApp();
}).then(function(app) { //TimeOutを設定する
window.setTimeout(function() {
loading.remove();
}, 200);
});
});
</script>これで上手くいっていれば動くはずです。
終わりに
HTMLとCSSはあまりやったことがなかったので結構大変でした。
あとコードのUIが見づらいのでちょっと変えたいとか書いてて思いました。
