Flutter修改应用名称、图标、启动页

不解释cium
2,244 阅读4分钟

前言

注意: 修改完成之后需要重新编译项目才能生效

应用名称

Android

在项目下找到android目录，依次app\src\main\AndroidManifest.xml，
打开AndroidManifest.xml文件，找到application节点，修改label参数即可

<application
        android:name="io.flutter.app.FlutterApplication"
        android:label="应用名称"
        android:icon="@mipmap/ic_launcher">
        ...
</application>

IOS

在项目下找到ios目录，依次Runner\Info.plist，
打开Info.plist文件，参数都是key-string的形式，找到CFBundleName，修改参数即可

<dict>
	...
	<key>CFBundleName</key>
	<string>应用名称</string>
	...
</dict>

应用图标

Android

在项目下找到android目录，依次app\src\main\res，然后会有一组mipmap开头的目录，即不同目录存放不同的图标大小，把我们不同大小的图标分别放在对应的目录中。

mipmap-hdpi - 7272
mipmap-mdpi - 4848
mipmap-xhdpi - 9696
mipmap-xxhdpi - 144144
mipmap-xxxhdpi - 192*192

图标默认使用的ic_launcher这个名称,我们可以把自己的图标名称改成ic_launcher放到对应的不同图标大小的目录中就可以完成修改。

如果不想使用默认的图标名称，自定义图标名称那就需要对项目进行配置。
打开AndroidManifest.xml文件，找到application节点，修改icon参数即可

<application
        android:name="io.flutter.app.FlutterApplication"
        android:label="应用名称"
        android:icon="@mipmap/ic_launcher">  <!-- 这里是修改图标名称的配置 -->
        ...
</application>

IOS

在项目下找到ios目录，依次Runner\Assets.xcassets\AppIcon.appiconset，然后会有一组后缀为1x、2x、3x的图标，根据尺寸存放即可。
注意 图片的名称要与默认的一致

自定义图标名称需要在同级目录的Contents.json文件中修改自己的配置

{
  "images" : [
    {
      "size" : "20x20",  <!-- 大小 -->
      "idiom" : "iphone",
      "filename" : "Icon-App-20x20@2x.png", <!-- 图标名称 --> 
      "scale" : "2x" <!-- 几倍显示 -->  
    },
    {
      "size" : "20x20",
      "idiom" : "iphone",
      "filename" : "Icon-App-20x20@3x.png",
      "scale" : "3x"
    },
    {
      "size" : "29x29",
      "idiom" : "iphone",
      "filename" : "Icon-App-29x29@1x.png",
      "scale" : "1x"
    },
    ...
    {
      "size" : "1024x1024",
      "idiom" : "ios-marketing",
      "filename" : "Icon-App-1024x1024@1x.png",
      "scale" : "1x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

ios的图标尺寸较多，可以根据Contents.json文件中的配置挨个去修改，或者只修改通用的即可。

启动页

Android

首先打开以下路径中的文件：android\app\src\main\res\AndroidManifest.xml文件, 在文件中添加这么一段

<meta-data
                android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
                android:value="true" />

添加完成后

...
<activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <meta-data
                android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
                android:value="true"/>
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
</activity>
...

meta-data 中value设置为true代表有启动页，然后打开res\values\style.xml文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
</resources>

文件中设置了style，名称为LaunchTheme，注意这个名称不能修改，style加载的是drawable中的launch_background.xml，我们打开这个文件：

在项目下找到android目录，依次app\src\main\res\drawable\launch_background.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white" />
    <!-- You can insert your own image assets here -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/launch_image" /> <!-- 启动页图片路径 -->
    </item>
</layer-list>`
  1. 将<item>里面的内容反注释，并且准备一张图片分辨率1080 x 1920,放入android\app\src\main\res\drawable即可。
  2. 图片的路径默认为@mipmap/launch_image改为@drawable/launch_image

注意 把图片名字改成launch_image即可。或者你可以用别的名字，把上面的xml文件改一下即可

关于背景颜色，Android自带的颜色只有white和black。
想自定义颜色，需要把原来的 @android:color/white中的android:去掉即可。

<item android:drawable="@color/orange" />

其中orange是自定义的颜色。 首先需要在android\app\src\main\res\values下新建一个colors.xml文件，

内容为

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="orange">#FFAB40</color>
    <color name="transparent">#00000000</color>
</resources>

中间的resources就是自己想要添加的颜色。

定义好以后就可以在launch_background.xml中引用了。

IOS

在项目下找到ios目录，依次Runner\Assets.xcassets\LaunchImage.imageset， 将LaunchImage.png、LaunchImage@2x.png、LaunchImage@3x.png 替换为我们自己启动页图片即可。

如果想使用其它的图片名称
就根据需求修改LaunchImage图片文件，并在同级别的Contents.json文件中配置即可。

{
  "images" : [
    {
      "idiom" : "universal",
      "filename" : "LaunchImage.png",
      "scale" : "1x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@2x.png",
      "scale" : "2x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@3x.png",
      "scale" : "3x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}
avatar
文章
阅读
粉丝