Flutter 本地图片配置和使用,添加启动图和Icon

Flutter 本地图片配置和使用,添加启动图和Icon

1.配置启动图和Icon

在Flutter开发中，Android和iOS对应的图片资源要放到对应的资源文件夹中，有一定的共同点，也有不一样的地方：

1.1 iOS图片配置

在iOS中，直接在Assets中拖入对应尺寸的Icon和LaunchImage即可，运行效果就不展示了。

iOS-Icon配置

1.2 Android 图片配置

在Android中，也是需要将图片导入指定的文件夹中：

android图片放置文件夹

• 各文件夹对应的图片尺寸：
  • mipmap-hdpi： 1x 图片
  • mipmap-mdpi： 1.5x 图片
  • mipmap-xhdpi： 2x 图片
  • mipmap-xxhdpi： 3x 图片
  • mipmap-xxxhdpi：4x 图片

配置Android图片路径和启动图的文件夹需要用到两个文件：

• AndroidManifest.xml ：配置app名称，icon图片路径等；

AndroidManifest.xml

• launch_background.xml: 位置在res-drawable文件夹下，主要是配置启动图相关信息；
  注意：启动图的放置路径：mipmap-hdpi文件夹下，和launch_background.xml不在同一路径下！

launch_background.xml

启动效果如下展示：

android启动图示例

2. 公共资源图片配置和使用

2.1 本地图片的路径配置

除了Icon和启动图这类对应的需要适配的图片外,有些iOS和Android可以共同使用的图片,可以使用package配置到工程的路径下,然后在使用Asset管理图片,在pubspec.yaml文件中指定图片的路径;

pubspec.yaml格式和配置

注意: 可能报错
flutter: The following assertion was thrown resolving an image codec:
flutter: Unable to load asset: images/tabbar_chat_hl.png
flutter: Another exception was thrown: Unable to load asset: images/tabbar_friends.png

如果文件的路径层级缩进不对,就回导致load图片失败的问题,所以要注意assets配置的空格层级;

2.2 本地图片的使用

以底部tabbar的图片配置使用为例:

BottomNavigationBarItem(
                icon:Image(height:20,width: 20,image: AssetImage('images/tabbar_chat.png')),
                activeIcon: Image(height:20,width: 20,image: AssetImage('images/tabbar_chat_hl.png')),
                title: Text('微信')),

注意,使用AssetImage()函数直接调取本地图片即可, activeIcon为tabbar选中的图片;

tabbar示例