前編では、テーマの設定、ダークモード対応、アイコンの追加について学びました。後編では、スプラッシュスクリーンの設定とアプリ名の設定について説明します。
4. スプラッシュスクリーンの設定
スプラッシュスクリーンは、アプリの起動時に一時的に表示される画面です。スプラッシュスクリーンを設定することで、アプリのブランドを印象付けたり、起動時のユーザー体験を向上させたりすることができます。
AndroidとiOSでは、スプラッシュスクリーンの設定方法が異なります。
4.1 Androidのスプラッシュスクリーン設定
Androidでは、launch_background.xml というドローワブルリソースを使って、スプラッシュスクリーンを定義します。
android/app/src/main/res/drawableディレクトリに、launch_background.xmlファイルがあることを確認します。launch_background.xmlを編集し、スプラッシュスクリーンのレイアウトを定義します。例えば、以下のように記述します。
xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/splash_background" />
<item>
<bitmap
android:gravity="center"
android:src="@mipmap/splash_image" />
</item>
</layer-list>@color/splash_backgroundは、スプラッシュスクリーンの背景色です。colors.xmlファイルで定義します。@mipmap/splash_imageは、スプラッシュスクリーンに表示する画像です。mipmapディレクトリに配置します。
android/app/src/main/res/values/styles.xmlを開き、LaunchThemeのwindowBackgroundに@drawable/launch_backgroundが設定されていることを確認します。
xml
<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
<item name="android:windowBackground">@drawable/launch_background</item>
</style>4.2 iOSのスプラッシュスクリーン設定
iOSでは、LaunchScreen.storyboard というストーリーボードファイルを使って、スプラッシュスクリーンを定義します。
- Xcodeで
ios/Runner.xcworkspaceを開きます。 Runner>Runner>LaunchScreen.storyboardを選択します。- デフォルトでは、
LaunchScreen.storyboardには、アプリ名と著作権情報が表示されています。これをカスタマイズして、スプラッシュスクリーンをデザインします。 - 画像を表示する場合は、
Assets.xcassetsに画像を追加し、LaunchScreen.storyboardにImageViewを配置して、画像を設定します。
4.3 スプラッシュスクリーンの表示時間
スプラッシュスクリーンの表示時間は、ネイティブコードで制御されています。Flutter側で表示時間を制御することはできません。
ただし、スプラッシュスクリーンが表示された後に、Flutter側で追加の初期化処理を行う場合は、WidgetsBinding.instance.addPostFrameCallback を使って、最初のフレームが描画された後に処理を実行することができます。
dart
@override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) {
// スプラッシュスクリーンが表示された後に行う処理
});
}5. アプリ名の設定
アプリ名は、デバイスのホーム画面やアプリ一覧などに表示される、アプリの名前です。
5.1 Androidのアプリ名設定
Androidでは、AndroidManifest.xml ファイルでアプリ名を設定します。
android/app/src/main/AndroidManifest.xmlを開きます。applicationタグのandroid:label属性に、アプリ名を設定します。
xml
<application
android:label="電卓アプリ"
android:name="${applicationName}"
android:icon="@mipmap/ic_launcher">5.2 iOSのアプリ名設定
iOSでは、Info.plist ファイルでアプリ名を設定します。
ios/Runner/Info.plistを開きます。CFBundleDisplayNameキーの値に、アプリ名を設定します。
xml
<key>CFBundleDisplayName</key>
<string>電卓アプリ</string>5.3 アプリ名の国際化
アプリ名を多言語対応させるには、文字列リソースを使います。
Androidでは、values ディレクトリに言語別の strings.xml ファイルを作成します。例えば、英語用の values-en/strings.xml と、日本語用の values-ja/strings.xml を作成します。
xml
<!-- values/strings.xml -->
<resources>
<string name="app_name">Calculator</string>
</resources>
<!-- values-en/strings.xml -->
<resources>
<string name="app_name">Calculator</string>
</resources>
<!-- values-ja/strings.xml -->
<resources>
<string name="app_name">電卓アプリ</string>
</resources>AndroidManifest.xml では、android:label に @string/app_name を設定します。
xml
<application
android:label="@string/app_name"
android:name="${applicationName}"
android:icon="@mipmap/ic_launcher">iOSでは、InfoPlist.strings ファイルを言語別に追加します。例えば、en.lproj/InfoPlist.strings と ja.lproj/InfoPlist.strings を作成します。
/* en.lproj/InfoPlist.strings */
"CFBundleDisplayName" = "Calculator";
/* ja.lproj/InfoPlist.strings */
"CFBundleDisplayName" = "電卓アプリ";Info.plist では、CFBundleDisplayName に設定した値が、InfoPlist.strings から取得されるようになります。
コラム：Flutterアプリのパフォーマンス最適化
Flutterアプリのパフォーマンスを最適化するには、以下のような点に注意する必要があります。
不要なウィジェットの再構築を避ける:
constコンストラクタを使ったり、buildメソッドを小さなウィジェットに分割したりすることで、不要なウィジェットの再構築を避けられます。ListViewでitemExtentを指定する:ListViewを使う場合は、itemExtentプロパティを指定することで、リストのパフォーマンスを向上させることができます。画像のサイズを最適化する: 画像のサイズが大きいと、メモリ使用量が増加し、パフォーマンスが低下する可能性があります。画像のサイズを適切に調整し、不要な透明部分は削除しましょう。
プロファイリングツールを使ってボトルネックを特定する: Flutter DevTools のプロファイリングツールを使って、アプリのパフォーマンスのボトルネックを特定し、最適化することができます。
不要なアニメーションを避ける: アニメーションはUIを魅力的にしますが、過度な使用はパフォーマンスに影響を与える可能性があります。本当に必要なアニメーションだけに絞りましょう。
バックグラウンド処理に
compute関数を使う: 時間のかかる処理は、compute関数を使ってバックグラウンドで実行することで、UIスレッドのブロックを避けられます。メモリリークを避ける: 不要になったオブジェクトへの参照を保持し続けないように注意し、メモリリークを避けましょう。
これらの点を意識することで、Flutterアプリのパフォーマンスを最適化し、ユーザー体験を向上させることができます。