Flutter Custom Splash Screen Tutorial | Flutter Native Splash Screen Guide

Summary

このビデオでは、Flutterアプリケーション用のカスタムスプラッシュスクリーンを作成する方法を紹介しています。Flutter Native Splashパッケージを使用して、iOSとAndroid向けに必要な設定とファイルを生成します。手順には、pubspec.yamlファイル内の設定を定義し、背景色やロゴ画像をカスタマイズする方法が含まれます。また、Android 12以降のデバイス向けにスプラッシュスクリーンの設定を調整し、アプリケーションの初期化が完了するまでスプラッシュスクリーンを表示し続ける方法も学びます。最後に、5秒間の遅延を設けてアプリケーションを表示するデモンストレーションを行い、チュートリアルを締めくくります。

Takeaways

• 📘 Flutterアプリケーションのカスタムスプラッシュスクリーンを作成する方法を学ぶことができます。
• 📚 唯一必要なパッケージはflutter_native_splashで、iOSとAndroidの特定の設定とファイルを生成するために使用されます。
• 📋 まず、pubspec.yamlファイル内にflutter_native_splashの設定を記述する必要があります。
• 🖼️ スプラッシュスクリーンに表示したい画像をassets/images/splashにドラッグアンドドロップで追加します。
• 🎨 スプラッシュスクリーンの背景色を変更するには、pubspec.yamlファイル内のcolorプロパティを設定します。
• 📝 flutter_native_splashの設定を更新したら、ターミナルで'flutter pub run flutter_native_splash:create'コマンドを実行して設定を生成します。
• 📱 Android 12以降では、スプラッシュスクリーンの扱いが変わっているため、プラグインではAndroid 12用の設定が別途必要です。
• 🖌️ スプラッシュスクリーンに表示する画像を指定するには、pubspec.yamlファイル内のimageプロパティを設定します。
• ⏱️ アプリケーションの初期化が完了するまでスプラッシュスクリーンを表示し続けるには、メイン関数を非同期にし、flutter_native_splashのpreserveメソッドを使用します。
• 🔧 初期化が完了したら、flutter_native_splashのremoveメソッドを呼び出してスプラッシュスクリーンを削除します。
• 📺 チュートリアルを通じて、Flutterで独自のスプラッシュスクリーンを作成し、アプリケーションの最初の印象を良くする方法を学ぶことができます。
• 🌟 質問や懸念事項がある場合は、コメント欄に投稿してフィードバックを受け取ることができます。

Q & A

Flutterアプリケーションでカスタムスプラッシュスクリーンを作成するために必要な唯一のパッケージは何ですか？

Flutterアプリケーションでカスタムスプラッシュスクリーンを作成するために必要な唯一のパッケージは、flutter_native_splashパッケージです。

yamlファイル内でflutter_native_splashプラグインが使用する情報の定義方法を教えてください。

yamlファイル内でflutter_native_splashプラグインが使用する情報は、プラグインが生成する特定の設定とファイルに必要な情報として定義されます。これはiOSとAndroidそれぞれの要件に合わせて行われます。

スプラッシュスクリーンに表示するイメージファイルをどこに置きますか？

スプラッシュスクリーンに表示するイメージファイルを、プロジェクト内のassets/images/splashというディレクトリ構造に置きます。

スプラッシュスクリーンの背景色を変更するにはどうすればよいですか？

スプラッシュスクリーンの背景色を変更するには、pubspec.yamlファイル内のcolorプロパティに任意のカラーのhexコードを指定します。

Android 12でスプラッシュスクリーンの設定を変更する必要がある理由は何ですか？

Android 12ではスプラッシュスクリーンの扱いが変更されたため、プラグインはAndroid 12以降を実行するデバイス向けにスプラッシュスクリーンの特定のセクションを定義する必要があります。

スプラッシュスクリーンに表示するイメージを指定するにはどうすればよいですか？

スプラッシュスクリーンに表示するイメージを指定するには、pubspec.yamlファイル内のimageプロパティを、表示したいイメージファイルの相対パスに設定します。

アプリケーションの初期化が完了する前にスプラッシュスクリーンを維持するために使用されるメソッドは何ですか？

アプリケーションの初期化が完了する前にスプラッシュスクリーンを維持するために使用されるメソッドは、flutter_native_splashパッケージの`preserve`メソッドです。

メイン関数を非同期的に行う必要がある理由は何ですか？

メイン関数を非同期的に行うことで、アプリケーションの初期化ロジックで非同期処理（例えば、サービスロケータによるサービスの登録や環境変数の設定など）を行うことができます。

flutter_native_splash.createコマンドは何を実行しますか？

flutter_native_splash.createコマンドは、アプリケーションが展開されるすべてのプラットフォームに対して、スプラッシュスクリーンの特定の設定とファイルを生成します。

アプリケーションの初期化が完了したら、スプラッシュスクリーンを削除するために使用されるメソッドは何ですか？

アプリケーションの初期化が完了したら、スプラッシュスクリーンを削除するために使用されるメソッドは、flutter_native_splashパッケージの`remove`メソッドです。

このチュートリアルの最後に何を行なう必要がありますか？

このチュートリアルの最後に、コマンドを保存し、アプリケーションをデバッグして、スプラッシュスクリーンが意図した通りに表示されることを確認する必要があります。

チュートリアルが終了した後、フィードバックを提供する方法は何ですか？

チュートリアルが終了した後、フィードバックを提供するには、動画のコメント欄に質問、コメント、または懸念事項を記入するか、チャンネルを購読して新しい動画がリリースされるたびに通知を受け取ることができます。

Outlines

00:00

📱 Flutterアプリケーションのカスタムスプラッシュスクリーン作成

このビデオでは、Flutterアプリケーションのためのカスタムスプラッシュスクリーンの作成方法を学びます。チュートリアルの最後に、画面に表示されているようなカスタムスプラッシュスクリーンを作成し、アプリケーションに移行できるようになります。まず始めに必要なパッケージであるflutter_native_splashを紹介し、その使用方法と、yamlファイル内の設定を説明します。その後、アプリケーションのデフォルトスプラッシュスクリーンを確認し、プラグインを使用してスプラッシュスクリーンの色を変更し、設定を生成する方法を学びます。

05:02

🎨 Android 12向けスプラッシュスクリーンのカスタマイズ

Android 12以降でスプラッシュスクリーンの表示方法が変更されたため、プラグインはAndroid 12以降を実行するデバイス向けに特別なセクションを定義します。ここでは、Android 12セクションでスプラッシュスクリーンの色を設定し、同じコマンドを使用して再び設定を生成します。その後、アプリケーションを実行し、更新されたグリーン色の背景が表示されることを確認します。次に、デフォルトのアプリアイコンの代わりに画像を表示する方法を学びます。これには、pubspec.yamlファイル内のimageプロパティを設定し、保存して、flutter_native_splash createコマンドを再実行します。これにより、定義された画像と背景色を使用するスプラッシュスクリーンが更新されます。

10:02

🔧 アプリケーションの初期化とスプラッシュスクリーンの管理

アプリケーションが最初の画面が表示される前に初期化処理を行う必要がある場合、flutter_native_splashパッケージを使用してスプラッシュスクリーンを表示しながらその処理を行う方法を学びます。まず、main関数を非同期的にし、flutter widget bindingsを初期化します。次に、flutter_native_splashのpreserveメソッドを使用して、スプラッシュスクリーンを手動で削除するまで維持します。その後、5秒間待機するデモとしてfuture.delayedを使用し、その後にflutter_native_splash.removeメソッドを呼び出してスプラッシュスクリーンを削除します。これにより、アプリケーションがユーザーに表示される前にスプラッシュスクリーンが表示され、5秒後にアプリケーションが開始されます。

Keywords

💡Flutterアプリケーション

Flutterは、Googleが開発したオープンソースのモバイルアプリケーション開発キットです。このビデオでは、Flutterアプリケーションにカスタムスプラッシュスクリーンを作成する方法について説明しています。スプラッシュスクリーンは、アプリのロゴや情報を表示する最初の画面で、アプリのプロフェッショナルさやブランド性を強化するのに役立ちます。

💡スプラッシュスクリーン

スプラッシュスクリーンは、アプリケーションが起動し、メインコンテンツが表示されるまでの間、表示される一時的な画面です。このビデオでは、Flutter Native Splashパッケージを使用して、カスタムスプラッシュスクリーンを作成し、アプリの起動時に表示されるように設定する方法が説明されています。

💡Flutter Native Splashパッケージ

Flutter Native Splashは、Flutterアプリケーションのスプラッシュスクリーンを作成し、カスタマイズするためのパッケージです。ビデオでは、このパッケージを使用してiOSとAndroid向けのスプラッシュスクリーンの設定とファイルを生成する方法が説明されています。また、Android 12以降のデバイスに対するスプラッシュスクリーンの特別な設定も行えます。

💡YAMLファイル

YAMLは、データ構造の表現フォーマットの1つで、アプリケーションの設定を記述するために使用されます。ビデオでは、pubspec.yamlファイル内にFlutter Native Splashの設定を記述し、スプラッシュスクリーンの外観をカスタマイズする方法が説明されています。

💡アセット

アセットとは、アプリケーションが使用する画像、音声、その他のメディアファイルのことを指します。このビデオでは、スプラッシュスクリーンに表示されるロゴ画像をアセットとして指定し、pubspec.yamlファイルでアセットのパスを設定する方法が説明されています。

💡カラープロパティ

カラープロパティは、スプラッシュスクリーンの背景色を設定するために使用されます。ビデオでは、カラープロパティを使用して、スプラッシュスクリーンの背景色を緑色に変更する方法が説明されています。これにより、アプリのブランドカラーを反映させることができます。

💡ターミナル

ターミナルは、コンピュータのオペレーティングシステムと直接的に対話するためのコマンドラインインターフェースです。ビデオでは、ターミナルを使用してFlutter Native Splashのコマンドを実行し、スプラッシュスクリーンの設定を生成しています。

💡サービスロケータ

サービスロケータは、依存性注入を管理し、アプリケーションのオブジェクトを提供するデザインパターンです。ビデオでは、アプリケーションの初期化時にサービスロケータを使用してサービスを登録し、スプラッシュスクリーンが表示された後でメインアプリケーションに移行するように設定する方法が説明されています。

💡Dart言語

Dartは、Flutterアプリケーションの開発に使用されるプログラミング言語です。ビデオでは、Dart言語を使用してFlutterアプリケーションのメイン関数を記述し、非同期処理を実行してスプラッシュスクリーンの表示時間を制御する方法が説明されています。

💡初期化

初期化とは、アプリケーションが起動したときに必要な設定やデータの準備を行うプロセスです。ビデオでは、スプラッシュスクリーンが表示された後、アプリケーションの初期化処理を実行し、完了後にメインコンテンツに移行するように設定する方法が説明されています。

💡プラグイン

プラグインは、アプリケーションに追加の機能を提供するソフトウェアコンポーネントです。このビデオでは、Flutter Native Splashというプラグインを使用して、Flutterアプリケーションにカスタムスプラッシュスクリーンを実装する方法が説明されています。プラグインは、開発者がアプリの機能を拡張する際に役立ちます。

Highlights

The tutorial shows how to create custom splash screens for Flutter applications

The only required package is flutter_native_splash

The plugin generates specific settings and files for iOS and Android from a yaml file

Links to resources and source code are provided in the video description

Define the flutter_native_splash settings in the yaml file to configure the plugin

Ensure there are no indents for flutter_native_splash at the top level of the yaml file

Test the default splash screen before making changes

Create an 'assets' folder to store the splash screen image

Place the image file in the 'assets/images/splash' directory

Uncomment the 'assets' line in the yaml file and specify the image path

Use the 'color' property to change the background color of the splash screen

Run 'flutter_native_splash create' to generate the platform-specific settings

For Android 12, define separate settings under the 'android_12' section of the yaml file

Uncomment and set the 'image' property to use a custom image instead of the app icon

Run 'flutter_native_splash create' again to apply the image and color changes

Mark the main function as async and use FlutterNativeSplash.preserve() to show the splash screen during initialization

Perform any setup tasks before the app is ready, such as registering services with a service locator

Call FlutterNativeSplash.remove() to dismiss the splash screen and show the app

The tutorial demonstrates waiting for 5 seconds before removing the splash screen

Transcripts

in today's video I'm going to be showing

you guys how to create custom spash

screens for flutter application by the

end of this tutorial you'll be able to

understand how to create a custom spash

screen like the one being displayed on

screen then actually move into your

application so to get started the first

thing that I'm going to be showing you

guys are all of the packages that we're

going to be using while developing this

functionality the only package that we

require is the flutter native Splash

package and what this is going to allow

us to do is Define some information

within our yaml file which this plug-in

is going to use in order to generate the

specific setting and files that are

required for IOS and Android

respectively to show the specific splash

screen so by using this plugin it's

going to make our development life a

whole lot easier by doing all of the

heavy lifting for us so I'll copy this

dependency I'll come back and I will

come back to my pspec yaml file and

actually paste it in here and as a side

note I just want to quickly let you guys

know the links to all of the resources

that I use within this video as well as

a link to the source code can be found

in the description below so feel free to

take a look at it if you're confused at

any point so I'm going to let Flor pup

gets do its magic and while that is

happening I just want to let you guys

know that now that we've actually

imported the dependency what we have to

do is actually Define a specific section

within our yaml file in order to tell

this dependency how it's going to

function so to do that you can come back

to the actual pub. Dev page for flutter

native Splash and you come all the way

down to step number one which says that

we need to set the flutter native Splash

settings within our yaml file so you can

either create a new yaml file which you

place this stuff in to or you can use

the existing pspec ml file and place

everything in there so what I'm going to

be doing is doing the letter option so I

will copy this uh by using this

clipboard icon here and copy all of the

code I am going to come back come back

to ppsp daml I'm going to go to the

bottom of this and I'm going to be

pasting this in here once that is done

the next thing that I am going to be now

doing is actually going to the very top

and then making sure that there is no

intent for the flutter native Splash so

as you can see there are no indents for

flutter native Splash it's at the start

of the line so just do that command save

and that's pretty much all we had to do

so now that this is done what I'm going

to be doing is giving a quick test run

to my application to show you guys what

the current default functionality is

welcome back everybody so now that the

actual application is running on my

Simulator the next thing that I'm going

to be doing is actually stopping running

it and I will start running it again to

actually show you what the default

splash screen looks like so currently

when we have not changed anything this

is what the default splash screen looks

like it's just a white background with

the flutter icon within it so now we're

going to be changing it so to change it

firstly we're going to be taking a look

at how we are going to be doing it for

all platforms and then what settings we

need to tweak for Android 12

specifically so before we can get

started the first thing that I'll do is

I will create a new folder and I'm going

to call this assets and this is where

I'm going to be placing the image file

for actually the image that I want to

show on the splash screen so once this

is done I'm going to create a new folder

under here which I'll call images and

after that I'm going to create a new

folder under that called splash and then

I am going to be basically opening this

in finder or if you're using File

Explorer on Windows and from here what

I'm going to do is basically drag and

drop the actual file in which I require

so I'm going to quickly copy that file

in just give me a second and this is the

file that I'm using this is the logo for

the cash app app so I'm just using that

I'll copy and paste that in here so now

we have under our assets images Splash

folder a logo. pnt file that we have to

display or we're going to be displaying

on our splash screen so once this is

done the next thing that we're going to

be doing is coming to ppsp spec. yaml

and I am firstly going to go to the

section where we have flutter and then

underneath the flutter there's going to

be a specific section that says assets

so let me find that there it is I'm

going to uncomment the assets line and

then the next line after that making

sure that the indentation levels are

correct and then here I'm going to say

that flutter you need to make sure that

the assets that are under the images

folder are made available to us so once

this is done that's pretty much all we

have to do so now anything anything

that's under asset images is going to be

made available to my application to use

once this is done now we can come to the

specifics of actually configuring our

flutter splash screen so the first thing

that we're going to be doing is actually

taking a look at how to change the color

so to change the color of our splash

screen we can use the color property

that's defined here and the color

property that I am going to be using is

going to be for a green color so I'll

copy that hex code and actually paste it

in so you can paste in any hex code here

for any color the one that I'm pasting

here is going to be for a greenish color

so once we've done this what we've

basically done is now updated our actual

configuration Flor splash screen so what

now we need to do is actually take these

changes and then generate the specific

setting so for all of the different

platforms that our actual app is going

to be deployed to so to do that what

we're going to be doing is actually

using the following command which I'm

going to be showing you it's called here

start run flutter native Splash create

so I'll copy this this command come back

and then actually come to the terminal

and paste it in and if I press enter

you're going to see that it starts

building the package and it tells me

here you go it's gone ahead and it's

created all of these different settings

and files for all of these different

platforms and now our splash screen

should be updated so if I start running

my application and I start running it

again and as you can see nothing changed

so let's actually discuss why this

happened and I specifically did to

actually show you guys what the issue

here is so if I was testing this on an

iOS simulator then this should have

worked but specifically after Android 12

some things changed in the way that

Android 12 handles the splash screen so

due to that now this plug-in actually

defines a separate section for any

devices that are going to have Android

12 or above installed on them and the

application is going to be running on

them so for that we have this Android 12

specific section and here is where we

have to define specific settings for the

splash screen screen when it comes to

Android 12 or later so here I'm going to

come uncomment the color and since I

want the color to be same for all of the

flash screens regardless of whether it's

running on iOS web or the actual Android

12 or above then what I'm going to be

doing is copying this color and coming

back and then actually pasting it here

like so under the Android 12 section to

command save then I'm what I'm going to

be doing is running the same command

again so it's going to go ahead and do

everything for us once again and then

I'll start running my application again

and hopefully this time when the

application spins up the actual splash

screen that we're going to be seeing is

going to be a background which is going

to be green in color like so so once

this is done the next thing that now

we're going to be taking a look at is

how can we show the image instead of

this default app icon that we're seeing

well to do this what we're going to be

doing is coming back to the pope.l file

and specifically there are a lot of

settings that you can change to achieve

a lot of different variations of your

splash screen but the one we are

concerned with is going to be the actual

property that says image and this is

going to be this property right here so

I'm going to uncomment this line and

then I'm going to be setting this equal

to the actual relative path to the asset

logo.png so that's going to be under

assets images spash and then

logo.png like do and do command save and

then since for Android 12 the settings

are different then I'm going to copy the

same

and I'm going to come down to the

Android 12 section and here the actual

property that we're going to be updating

is going to be the image property so

I'll uncommon this and paste this here

like so and do command save Android 12

also has a bunch of other settings that

you can s such as the icons background

color The Branding so you can take a

look at all of these and try to

understand there are a lot of parameters

that you can tweak to achieve different

functionality but this is what we are

going to be doing for now so now that

I've done this the then we're going to

do the same thing which is to save our

pope.l to run flutter native slon create

it's going to go ahead do everything for

us you're going to see that now the

actual outputs are a bit different it's

also giving us output for creating

images and once this is done what I'm

going to be doing now is actually start

debugging my application so now what

you're going to see that our splash

screen is going to be updated and we're

going to see a different type of splash

screen that's going to use our defined

image and our defined background color

as you can see so now the last thing

that I want to discuss is let's just say

that for some reason your application

has to do some initialization before the

first screen is presented to the end

user maybe you want to update your

service locators by using gex and

register some services or something else

so how can you do that while showing the

splash screen and once everything like

that is done then move on to your actual

application well to do this it's going

to be pretty simple if you're using this

specific package and the way we're going

to be doing this is first I'm going to

be coming to my main doell I'm going to

be marking my main function as

asynchronous and once this is done then

what I'm going to be doing is actually

making sure that the flutter widget

bindings are initialized and that I have

access to them so I'm going to be doing

that by using the following code where

I'm doing widget flutter bindings do

insure initialized and then once it

returns widget bindings to me I'm saving

that within this actual variable once

this is done then I'm going to use the

actual flutter n Splash plugin and I'm

going to do preserve and what preserve

is going to do is that it's going to

allow us to manually determine when we

want to basically get rid of our splash

screen so it's going to preserve the

splash screen until we actually remove

it ourselves so it requires widget

bindings so we'll give it the widget

bindings and there we go so now that

this is done the next thing that I'm

going to be doing is doing any kind of

logic that I want to do in terms of

either using a service locator dising

services maybe setting up the

application importing environment

variables whatever I have to do to set

my application up before it's ready for

the user so to demonstrate this what I'm

going to be doing is actually just doing

an evade call here which I where I'm

going to be doing future. delayed and

here I'm going to say that we're going

to wait for a duration and that is going

to be in seconds 5 seconds so I'm going

to wait for 5 seconds um and then I will

proceed to the next line of code and

here once we want to remove our splash

screen then what I'm going to be doing

is flutter native spash Dot and here you

can do remove

move and this is how the logic is going

to work so basically when our

application spins up we are going to

show the splash screen then we are not

going to be removing it we're going to

preserve it till we decide when we want

to remove it we'll do any kind of actual

setup logic that we need to do in my

case we're just going to wait for 5

seconds and then we'll call for other

native Splash to remove that splash

screen and then start running our

application to actually show it to the

user and then let our user do whatever

he wants to do so with this done to

command save and I will start debugging

my application and hopefully now you're

going to see that when the actual splash

screen is going to be launched it's

going to stay for much longer than what

we were seeing initially so as you can

see the splash screen is being shown 1 2

3 4 5 and after around 5 seconds it's

going to show the application to us so

that's pretty much it for today's

tutorial I hope that you enjoyed this

tutorial and learned how to create your

own custom Splash screens using flutter

as always leave a like on the video and

subscribe to my channel so that you get

notified every time I release a new

video and if you have any question

comments or concerns feel free to leave

them down in the comments below and I'll

try my best to answer them for you so

stay happy stay healthy keep learning

keep growing and I'll see you guys in

the next video bye-bye