flutter_native_splashでハマったポイント全部まとめ

結論

Flutterでスプラッシュ画面を実装する際、以下のミスで詰まりました

• pubspec.yamlの構造ミス
• 画像パスのスペルミス
• 設定反映忘れ

やりたかったこと

アプリ起動時にロゴを表示したい

詰まったポイント

❌ ① Duplicate mapping keyエラー

pubspec.yaml

flutter:
flutter:

👉 原因
→ 同じキーが2回

👉 解決
→ 1つにまとめる

---

❌② dependenciesに設定を書いてしまう

pubspec.yaml

dependencies:
  color: "#fff"

👉 原因
→ YAML構造ミス

👉 解決
→ flutter_native_splash: を外に出す

---

❌ ③ 画像が表示されない

👉 原因

パスミス（splase.png）
assets未登録

👉 解決

flutter:
  assets:
    - assets/images/splash.png

---

❌ ④ 設定しても反映されない

👉 原因
→ コマンド未実行

👉 解決

flutter clean
flutter pub get
dart run flutter_native_splash:create

---

⑤最終的な完成コード

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^4.7.0
  firebase_messaging: ^16.2.0
  shared_preferences: ^2.2.2
  cupertino_icons: ^1.0.8
  flutter_native_splash: ^2.4.7
  flutter_riverpod: ^3.3.1
  cloud_firestore: ^6.3.0

flutter:
  uses-material-design: true
  assets:
    - assets/images/splash.png

flutter_native_splash:
  color: "#ffffff" 
  image: assets/images/splash.png

  android_12:
    image: assets/images/splash.png
    color: "#ffffff" 

---

学び

• YAMLは書き方にとても厳しい
• Flutterは「設定して終わり」じゃない