返回

Flutter 教程：全面掌握图标、名称、启动页、版本号变更技巧

Android

目录

  • Flutter 简介
  • 修改 App 图标
    • Android 平台
    • iOS 平台
  • 修改 App 名称
    • Android 平台
    • iOS 平台
  • 修改启动页
    • Android 平台
    • iOS 平台
  • 修改版本号
    • Android 平台
    • iOS 平台
  • Contents.json 文件详解
    • 文件结构
    • 字段说明
    • 应用示例
  • 结语

Flutter 简介

Flutter 是一款开源的 UI 工具包，可帮助开发人员轻松构建原生质量的移动应用。它由谷歌于 2017 年推出，旨在通过一套通用的编程语言和工具来简化移动应用开发。Flutter 具有许多优势，例如：

  • 跨平台开发：Flutter 允许您使用相同的代码库同时为 Android 和 iOS 平台构建应用。
  • 快速开发：Flutter 的热重载功能使您可以快速地迭代和更新您的应用，而无需重新编译整个应用。
  • 原生性能：Flutter 应用具有与原生应用相同的性能，因为它们是直接编译成机器码的。
  • 丰富的组件库：Flutter 提供了丰富的组件库，可帮助您轻松构建各种类型的移动应用。

修改 App 图标

App 图标是用户对您的应用的第一印象，因此选择一个独特且引人注目的图标非常重要。在 Flutter 中，您可以轻松修改 App 图标。

Android 平台

  1. 打开您的 Flutter 项目，在 android/app/src/main/res 目录下找到 mipmap 文件夹。
  2. 在 mipmap 文件夹中，找到与您要修改的屏幕密度相对应的子文件夹，例如 mipmap-mdpi、mipmap-hdpi、mipmap-xhdpi 等。
  3. 在选定的子文件夹中，找到名为 ic_launcher.png 的文件，并将其替换为您要使用的图标。
  4. 确保您使用的图标符合 Android 的图标要求，例如大小、格式和颜色。

iOS 平台

  1. 打开您的 Flutter 项目，在 ios/Runner/Assets.xcassets 目录下找到 AppIcon.appiconset 文件夹。
  2. 在 AppIcon.appiconset 文件夹中，找到与您要修改的屏幕密度相对应的子文件夹，例如 AppIcon-29x29@1x、AppIcon-40x40@2x、AppIcon-60x60@3x 等。
  3. 在选定的子文件夹中，找到名为 Contents.json 的文件，并将其替换为您要使用的图标。
  4. 确保您使用的图标符合 iOS 的图标要求，例如大小、格式和颜色。

修改 App 名称

App 名称是用户识别您的应用并与之交互的重要信息。在 Flutter 中，您可以轻松修改 App 名称。

Android 平台

  1. 打开您的 Flutter 项目，在 android/app/src/main 目录下找到 AndroidManifest.xml 文件。
  2. 在 AndroidManifest.xml 文件中，找到 <application> 标签，并在其中找到 android:label 属性。
  3. 将 android:label 属性的值修改为您要使用的 App 名称。

iOS 平台

  1. 打开您的 Flutter 项目，在 ios/Runner/Info.plist 目录下找到 Info.plist 文件。
  2. 在 Info.plist 文件中，找到 CFBundleDisplayName 键，并将其值修改为您要使用的 App 名称。

修改启动页

启动页是用户在打开您的应用时看到的第一个屏幕。在 Flutter 中，您可以轻松修改启动页。

Android 平台

  1. 打开您的 Flutter 项目，在 android/app/src/main 目录下找到 res/drawable 文件夹。
  2. 在 res/drawable 文件夹中，找到名为 launch_background.xml 的文件，并将其替换为您要使用的启动页背景图片。
  3. 如果您想自定义启动页上的其他元素，例如徽标、文本等，可以在 launch_background.xml 文件中进行修改。

iOS 平台

  1. 打开您的 Flutter 项目，在 ios/Runner/Assets.xcassets 目录下找到 LaunchImage.imageset 文件夹。
  2. 在 LaunchImage.imageset 文件夹中，找到与您要修改的屏幕密度相对应的子文件夹，例如 LaunchImage-29x29@1x、LaunchImage-40x40@2x、LaunchImage-60x60@3x 等。
  3. 在选定的子文件夹中，找到名为 Contents.json 的文件，并将其替换为您要使用的启动页背景图片。
  4. 如果您想自定义启动页上的其他元素，例如徽标、文本等，可以在 Contents.json 文件中进行修改。

修改版本号

版本号是标识您的应用版本的唯一标识符。在 Flutter 中，您可以轻松修改版本号。

Android 平台

  1. 打开您的 Flutter 项目，在 android/app/build.gradle 目录下找到 build.gradle 文件。
  2. 在 build.gradle 文件中，找到 versionCode 和 versionName 属性，并将其值修改为您要使用的版本号。

iOS 平台

  1. 打开您的 Flutter 项目，在 ios/Runner/Info.plist 目录下找到 Info.plist 文件。
  2. 在 Info.plist 文件中，找到 CFBundleShortVersionString 和 CFBundleVersion 键，并将其值修改为您要使用的版本号。

Contents.json 文件详解

Contents.json 文件是 Flutter 中用于配置 App 图标和启动页的 JSON 格式文件。该文件位于 ios/Runner/Assets.xcassets 目录下。

文件结构

Contents.json 文件由一个 JSON 对象组成，该对象包含以下属性：

  • images：一个数组，其中包含指向 App 图标和启动页图像文件的路径。
  • info：一个对象，其中包含有关 App 图标和启动页的信息，例如大小、颜色等。

字段说明

Contents.json 文件中的字段说明如下：

  • images：该数组包含指向 App 图标和启动页图像文件的路径。每个图像文件都必须是一个 PNG 文件，并且必须满足相应的尺寸要求。
  • info：该对象包含有关 App 图标和启动页的信息，例如大小、颜色等。以下是 info 对象的字段说明：
    • version：该字段指定 Contents.json 文件的版本号。当前版本号为 1.0。
    • author：该字段指定 Contents.json 文件的作者。
    • width 和 height：这两个字段指定 App 图标和启动页图像的宽度和高度。
    • originalWidth 和 originalHeight：这两个字段指定 App 图标和启动页图像的原始宽度和高度。
    • scale：该字段指定 App 图标和启动页图像的缩放比例。
    • insets：该字段指定 App 图标和启动页图像的内边距。
    • idiom：该字段指定 App 图标和启动页图像的语言环境。例如，idiom 可以是 universal、iphone 或 ipad。
    • filename：该字段指定 App 图标和启动页图像的文件名。

应用示例

以下是一个 Contents.json 文件的示例：

{
  "images": [
    {
      "size": "29x29",
      "idiom": "universal",
      "filename": "Icon-29x29.png",
      "scale": "1x"
    },
    {
      "size": "40x40",
      "idiom": "universal",
      "filename": "Icon-40x40.png",
      "scale": "2x"
    },
    {
      "size": "60x60",
      "idiom": "universal",
      "filename": "Icon-60x60.png",
      "scale": "3x"
    },
    {
      "size": "29x29",
      "idiom": "iphone",
      "filename": "Icon-29x29@2x.png",
      "scale": "2x"
    },
    {
      "size": "40x40",
      "idiom": "iphone",
      "filename": "Icon-40x