玖叶教程网

前端编程开发入门

Flutter 日记 | 修改 App 图标、名称、启动页

一、移动端 Icon 替换

1. Android 修改应用图标

通过 Android Studio 打开 Flutter 中 android Module,右键选择 “New ===> Image Asset”:



随后打开对应 Icon,调整大小:



此时会自动为你在不同的分辨率下生成对应的 Icon:



调整 AndroidManifest 文件:

<application
        android:name="io.flutter.app.FlutterApplication"
        android:icon="@mipmap/ic_launcher"
        android:label="studyapp"
        android:roundIcon="@mipmap/ic_launcher_round"> <!-- 添加对于圆形 Icon 支持 -->

运行 Flutter 到 Android 设备查看效果即可:



2. iOS 修改应用图标

找了个图标生成网站:

  • icon.wuruihong.com/

上传对应的 Icon 选择生成的一些基本参数,这里感觉默认就够用了:



随后选择默认开始生成:



随后查看效果,生成速度很快~



接下来用 Xcode 打开对应的 ios module,替换对应资源:

下载已生成的图标,选取 iOS 图标资源复制到以下地址中:

  • ios ===> Runner ===> Assets.xcassets ===> AppIcon.appiconset

随后替换 Contents.json 文件即可。

运行查看效果:



俩者一对比,还是 Android 好,哈哈哈~

二、移动端启动页处理

1. Android 修改启动页

Step 1:为 Android Style 中新增全屏样式:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Fullscreen Style -->
    <style name="FullScreenTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <item name="android:windowFullscreen">true</item>
    </style>

    <!-- Theme applied to the Android Window while the process is starting -->
    <style name="LaunchTheme" parent="FullScreenTheme">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.
         
         This Theme is only used starting with V2 of Flutter's Android embedding. -->
    <style name="NormalTheme" parent="FullScreenTheme">
        <item name="android:windowBackground">@android:color/white</item>
    </style>
</resources>

查看下面截图可看详细目录地址:



Step 2:修改 launch_background 文件

先把 UI 给你提供的启动页图片对应的放在 drawable 中。

随后开启定义你的启动页图片:

<?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="fill"
            android:src="@drawable/launch_image" />
    </item>
</layer-list>

Step 3:运行查看效果

效果如下,我这是随便反编译一个 Apk 拿到的启动图:



2. iOS 修改启动页

这块我觉得 iOS 还蛮不错的,很 easy,替换下面的三张图就好:


效果都一样,这里就不放置效果图咯。

有个坑点就是少用模拟器,模拟器运行发现会有较长一段时间白屏,实际运行真机则没有这个问题。郁闷了我。

三、修改应用名称

1. 修改 Android 应用名称

按照如下地址,打开 AndroidManifest 并修改 application 节点下的 android:label 内容即可:

  • android ===> app ===> src ===> main ===> AndroidManifest

2. 修改 iOS 应用名称

按照如下地址修改 info.plist 中的 CFBundleName 值:

  • ios ===> Runner ===> Info.plist ===> CFBundleName

最后

Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心,但很多Flutter兴趣爱好者进阶学习缺少资源,今天我把搜集和整理的这份学习资源分享给有需要的人,若是有所需要,麻烦各位转发一下(可以帮助更多的人看到哦!),记得一定要关注+转发,然后私信@芜湖Android“Flutter”,即可回复免费下载的方式!!如果是需要Android开发进阶的资源,则可以私信“Android开发”领取。

以下是部分内容展示:

Flutter

Android


也希望 Flutter 生态越来越好 (flutter开发App效率真的很高,开发体验也是很好的 )。

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言