【Flutter】アプリ名やアイコンの変更とローンチスクリーンの表示

flutter

1. 概要

今回は下記についてです。

  • アプリ名の変更
  • アプリアイコンの変更
  • ローンチスクリーンの表示

対象としては開発を1年程やってて自分で最初から開発してみたい方になります。そのため細かい用語などの説明はしません。

2. プロジェクトの準備

2-1. プロジェクトを作成

3. アプリ名の変更

3-1. main.dart

  • titleを変更

変更前

home: const MyHomePage(title: 'Flutter Demo Home Page'),

変更後

home: const MyHomePage(title: 'My App'),

3-2. Android

  • android/app/src/main/AndroidManifest.xml
    • 「android:label」の値を変更

変更前

    <application
         android:label="name_icon_demo"
         android:name="${applicationName}"
         android:icon="@mipmap/ic_launcher">

変更後

    <application
         android:label="My App"
         android:name="${applicationName}"
         android:icon="@mipmap/ic_launcher">

3-3. iOS

  • ios/Runner/Info.plist
    • 「CFBundleName」の値を変更

変更前

    <dict>
      <key>CFBundleName</key>
      <string>name_icon_demo</string>

変更後

    <dict>
      <key>CFBundleName</key>
      <string>My App</string>

3-4. 結果

変更前

変更後

4. アプリアイコンの変更

4-1. Dependenciesの追加(dev)

flutter pub add flutter_launcher_icons --dev

4-2. アイコンを用意

  • 1024pxのアイコン
  • 下記サイトにてアイコンを作成
  • 揃ったアイコン
    • app_icon_1024.png
      • こちらだけを自作
    • app_icon_512.png
    • adaptive_icon_background_432.png
    • adaptive_icon_foreground_432.png

4-3. pubspec.yaml

下記を追記

flutter_icons:
  android: true
  ios: true
  image_path_ios: 'assets/icons/app_icon_1024.png'
  image_path_android: 'assets/icons/app_icon_512.png'
  adaptive_icon_background: 'assets/icons/adaptive_icon_background_432.png'
  adaptive_icon_foreground: 'assets/icons/adaptive_icon_foreground_432.png'

4-4. 実行

flutter pub run flutter_launcher_icons:main

4-5. 結果

5. ローンチスクリーンの表示

5-1. Dependenciesの追加

flutter pub add flutter_native_splash

5-2. 画像を用意

5-3. pubspec.yaml

下記を追記

flutter_native_splash:
  fullscreen: true
  image: 'assets/icons/app_icon_1024.png'
  color: '#a349a4'
  image_dark: 'assets/icons/app_icon_1024.png'
  color_dark: '#000000'
  android_12:
    image: 'assets/icons/splash_android12_1152.png'
    icon_background_color: '#a349a4'
    image_dark: 'assets/icons/splash_android12_1152.png'
    icon_background_color_dark: '#000000'

5-4. 実行

flutter pub run flutter_native_splash:create

5-5. 結果

6. 参考

関連記事

  1. 【Widget of the Week】#11 SliverAppBa…

  2. flutter

    【Flutter】リリース,Android,iOS

  3. 【予告】Widget of the Week 解説スタート!

  4. flutter

    【Flutter】KotlinでNative側を実装しFlutterと…

  5. flutter

    【Flutter】CustomPainterを使い、図形を描画

  6. flutter

    【Flutter】GraphQLClientを使ってGraphQL・A…

最近の記事

  1. AWS
  2. AWS
  3. AWS
  4. AWS
  5. AWS
  6. AWS
  7. AWS
  8. AWS

制作実績一覧

  1. Checkeys