14
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

flutterのsplash画面はネイティブ実装のsplashを使うべき

Last updated at Posted at 2020-06-23

みなさんflutterしていますか?
私はflutter始めました。
今回はアプリを作る際に導入されるスプラッシュ(Launch Screen)の話です

結論

タイトル通りになりますが、スプラッシュ画面を実装する際はflutterで実装するのではなく、ネイティブ実装を使用したほうがいいんじゃないでしょうか。という話です。

特にこのようなライブラリを利用するのが良さそうです。
https://pub.dev/packages/flutter_native_splash

概要

「flutter splash」などでGoogle検索すると、flutterのwidgetを利用したスプラッシュ画面を作成しているサンプルを見かけます。
よくある「2,3秒待って次の画面にnavigateする」といったようなものです。

これの問題は2点あると考えています。

  1. Appleのガイドラインに沿わない実装になる
  2. flutterデフォルト実装のスプラッシュとかち合う

問題

Appleのガイドラインに沿わない実装になる

ガイドラインについては下記参照ください
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/launch-screen/

素早くアプリが起動する印象を与えたいがためのスプラッシュスクリーンなのですが、widgetを利用して実装するとアプリが起動したあとに表示されるためアップルのガイドラインの意図に沿いません。
また、他にも重要なガイドラインがあるので実装時には要チェックです。

以下、ガイドラインから雑な意訳です。間違えていたらすみません!

  • 初期表示画面と似たスプラッシュスクリーンにする
  • テキストを含めない
  • 控えめにする
  • 宣伝しない

flutterデフォルト実装のスプラッシュとかち合う

flutterではデフォルトで起動画面(スプラッシュ)が含まれています。
そのため、独自実装で初期画面にスプラッシュ用のwidgetを配置すると、デフォルトの真っ白のネイティブスプラッシュが表示されるはずです。

アプリ起動 → ネイティブ真っ白Launch Screen → 独自実装スプラッシュ → 初期ビュー

といった流れです。
これは開発者としてよろしくないし、ユーザーエクスペリエンスも微妙なものになるかと思います。

まとめ

スプラッシュ画面はネイティブ実装を利用しましょう。
おすすめのライブラリはこちらです。
https://pub.dev/packages/flutter_native_splash

また、スプラッシュ画面は初期表示の画面背景色やテーマカラーと同等の背景色に + 控えめなアイコン程度(Appleのガイドラインは初期画面にあるものらしい)を配置する設計がよさそうです。

良いflutter LIFEを!!

14
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?