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

ホーム
BLOG
【Flutter】
【Flutter】アプリ名やアイコンの変更とローンチスク…

【Flutter】
2022.10.07

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

概要
プロジェクトの準備
アプリ名の変更
アプリアイコンの変更
ローンチスクリーンの表示
参考

1. 概要

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

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

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

2. プロジェクトの準備

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

こちらを参考
- https://isub.co.jp/flutter/flutter-dev-vscode-on-windows11/#create-project

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のアイコン
下記サイトにてアイコンを作成
- Android Asset Studio (romannurik.github.io)
揃ったアイコン
- 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. 画像を用意

自作の1024pxを使い、1152pxの画像を生成
- flutter_native_splash | Flutter Package (pub.dev)
  - App icon without an icon background: This should be 1152×1152 pixels, and fit within a circle 768 pixels in diameter.
下記サイトにて画像を作成
- 画像や写真のサイズを変更（拡大・縮小・リサイズ）する : オンラインイメージエディタ | 無料で画像を加工できるサイト PEKO STEP (peko-step.com)
作成された画像
- splash_android12_1152.png

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. 参考

投稿者プロフィール

Sondon: 開発好きなシステムエンジニアです。
卓球にハマってます。

制作実績一覧

Panko

※打ち合わせやBBQ、旅行、パーティー等でお使い下さい
「日程調整」で参加者の日程を調整
「どこでもあみだくじ」で役割分担
「みんなで割り勘」で楽々精算
参加者にURLを共有するだけ

BE A EXCITING ENGINEER!!

ワクワクする仕事しよう！

採用情報

株式会社isub

神奈川県川崎市高津区溝口２－１６－６シマザキビル２階
044-712-3921

PAGE TOP

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

1. 概要

2. プロジェクトの準備

3. アプリ名の変更

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

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

6. 参考

投稿者プロフィール

最新の投稿

関連記事

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

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

【Flutter】StateNotifierProviderで状態管理…

【Widget of the Week】#7 FadeTransiti…

【Flutter】ビルド,リリース,テスターへデプロイ(Flutter…

【Flutter】FlutterとKotlinでそれぞれCounter…

最近の記事

カテゴリー

制作実績一覧

BE A EXCITING ENGINEER!!