Merge pull request #269 from yumemi-inc/feature/issue-11-splash-doc

#11 splash画面実装のドキュメント準備する

docs/en/SPLASH_SCREEN.md

@@ -0,0 +1,86 @@
+# Setting up Splash Screen
+
+Language: English | [日本語](/docs/ja/SPLASH_SCREEN.md)
+
+## Procedure
+
+### 1. Adding Dependencies
+
+Add `flutter_native_splash` to the `project_root/apps/app/pubspec.yaml`. Then, run `flutter pub get`.
+
+```yaml
+dependencies:
+  flutter:
+    sdk: flutter
+  flutter_native_splash: ^x.x.x
+```
+
+### 2. Configuring the Splash Screen
+
+Add an image for the splash screen, such as `splash.png`. Place the image in the `project_root/apps/app/assets/splash_image` directory of your project.
+
+```md
+assets
+└── splash_image
+    ├── splash.png
+```
+
+Then, add the following configuration to the `project_root/apps/app/pubspec.yaml`, or create a new file named `flutter_native_splash.yaml` in the `project_root/apps/app/` directory and add the configuration there.
+
+```yaml
+flutter_native_splash:
+  color: "#42A5F5" # Specify the background color of the splash screen
+  image: assets/splash_image/splash.png # Path to the image used for the splash screen
+  full_screen: true # Specify true if you want the splash screen to be full screen
+  android: true # Enable splash screen for Android
+  ios: true # Enable splash screen for iOS
+  # Dark mode settings (optional)
+  color_dark: "#1A73E8"
+  image_dark: assets/splash_image/splash_dark.png
+```
+
+### 3. Running the Package
+
+Once you've added the configuration, run the following command in your terminal.
+
+```sh
+flutter pub run flutter_native_splash:create
+```
+
+If the configuration is not in `pubspec.yaml` (e.g., in `flutter_native_splash.yaml`), use the `--path` option.
+
+```sh
+flutter pub run flutter_native_splash:create --path=flutter_native_splash.yaml
+```
+
+### 4. Setting Up App Initialization (Optional)
+
+By default, the splash screen is removed when Flutter has drawn the first frame. If you want the splash screen to remain while your app initializes, use the `preserve()` and `remove()` methods together. Add the following code to your `main.dart` file.
+
+```dart
+import 'package:flutter_native_splash/flutter_native_splash.dart';
+
+void main() {
+  WidgetsFlutterBinding.ensureInitialized();
+  FlutterNativeSplash.preserve(widgetsBinding: WidgetsFlutterBinding.ensureInitialized());
+
+  runApp(MyApp());
+
+  // Remove the splash screen after initialization
+  initializeApp().then((_) {
+    FlutterNativeSplash.remove();
+  });
+}
+
+Future<void> initializeApp() async {
+  // Initialization code
+  await Future.delayed(Duration(seconds: 2));
+}
+```
+
+>[!FYI]
+>If you do not need to use the preserve() and remove() methods, you can place the `flutter_native_splash` dependency in the dev_dependencies section of `pubspec.yaml`.
+
+---
+
+By following these steps, you can set up a splash screen in your Flutter app. For more details, refer to the official [README](https://pub.dev/packages/flutter_native_splash).

docs/ja/SPLASH_SCREEN.md

@@ -0,0 +1,89 @@
+# スプラッシュ画面の設定
+
+言語: 日本語 | [English](/docs/en/SPLASH_SCREEN.md)
+
+## 手順
+
+### 1. 依存関係の追加
+
+プロジェクトの `プロジェクトのルート/apps/app/pubspec.yaml` ファイルに `flutter_native_splash` を追加してください。その後、`flutter pub get` を実行します。
+
+```yaml
+dependencies:
+  flutter:
+    sdk: flutter
+  flutter_native_splash: ^x.x.x
+```  
+
+### 2. スプラッシュ画面の設定
+
+  `splash.png` のようなスプラッシュ画面用の画像を追加してください。画像はプロジェクトの `プロジェクトのルート/apps/app/assets/splash_image` ディレクトリに配置します。
+
+```md
+assets
+└── splash_image
+    ├── splash.png
+```
+
+  その後、以下の設定を `プロジェクトのルート/apps/app/pubspec.yaml` ファイルに追加するか、`プロジェクトのルート/apps/app/`に `flutter_native_splash.yaml` という新しいファイルを作成し、そこに設定を追加します。
+
+```yaml
+
+flutter_native_splash:
+  color: "#42a5f5" #スプラッシュスクリーンの背景色を指定します。
+  image: assets/splash_image/splash.png #スプラッシュスクリーンに使用する画像のパス
+  full_screen: true #スプラッシュスクリーンを画面全体にしたい時はtrueを指定します。
+  android: true #Android向けのスプラッシュスクリーンを有効にするかどうか
+  ios: true #iOS向けのスプラッシュスクリーンを有効にするかどうか
+  # ダークモード設定（オプション）
+  color_dark: "#1a73e8"
+  image_dark: assets/splash_image/splash_dark.png
+  ```
+
+### 3. パッケージの実行
+
+設定を追加したら、ターミナルで以下のコマンドを実行します。
+
+```sh
+flutter pub run flutter_native_splash:create
+```
+
+設定が `pubspec.yaml` 以外（`flutter_native_splash.yaml`等）にある場合は、 `--path` オプションを使用してください。
+
+```sh
+flutter pub run flutter_native_splash:create --path=flutter_native_splash.yaml
+```
+
+### 4. アプリ初期化のセットアップ（オプション）
+
+デフォルトでは、スプラッシュ画面はFlutterが最初のフレームを描画したときに削除されます。もしアプリの初期化が完了するまでスプラッシュ画面を保持したい場合は、 `preserve()` と `remove()` メソッドを使用します。
+`main.dart` ファイルで以下のコードを追加します。
+
+```dart
+import 'package:flutter_native_splash/flutter_native_splash.dart';
+
+void main() {
+  WidgetsFlutterBinding.ensureInitialized();
+  FlutterNativeSplash.preserve(widgetsBinding: WidgetsFlutterBinding.ensureInitialized());
+
+  runApp(MyApp());
+
+  // 初期化後にスプラッシュ画面を削除する
+  initializeApp().then((_) {
+    FlutterNativeSplash.remove();
+  });
+}
+
+Future<void> initializeApp() async {
+  // 初期化処理
+  await Future.delayed(Duration(seconds: 2));
+}
+```
+
+> [!FYI]
+> preserve()メソッドとremove()メソッドを使う必要がない場合は、pubspec.yamlのdev_dependenciesセクションにflutter_native_splash依存関係を置くことができます。
+
+---
+
+この手順に従って、Flutterアプリにスプラッシュ画面を設定することができます。
+詳しくは、公式の [README](https://pub.dev/packages/flutter_native_splash) を参照してください。