重要的事情先说:
- pubspec.yaml文件里面的路径不要加2.0x,3.0x
- 没有1x图片的时候,不要创建2.0x目录,直接2.0x的图片放在最外层就行
Flutter加载本地2.0x,3.0x图片
1.在和ios、android同级目录中,创建一个images文件夹
2.在pubspec.yaml文件中声明图片资源文件夹的路径(注意前面的空格,很重要)
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^2.0.0
flutter:
uses-material-design: true
assets:
- images/
3.将2.0x图片直接丢到images文件下,将3.0x图片丢到images/3.0x文件夹下
如果你还需要兼容1x图片,那么就创建2.0x文件夹,把2.0x图片丢到2.0x文件夹下,把1.0x图片放到images目录下
4.使用
Image.asset(
'images/vehicle_battery_icon.png',
width: 24,
height: 12,
),
这样就可以根据不同的机型分辨率,适配不同尺寸的图片了。
重要的事情再说一遍:
- pubspec.yaml里面不需要写2.0x,3.0x目录
- 没有1x图片的时候,不要创建2.0x目录,直接2.0x的图片放在最外层就行
当然我的项目中,我对images目录没有按照业务再细分了,而是把所有的本地资源图片一股脑丢进去的。如果你要分级的话,比如目录是这样 images/home
images/mine
,那么就按照上面的方法,把3.0x的文件夹放到对应的业务文件夹下。
pubspec.yaml也跟着改动一下即可,类似这样
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^2.0.0
flutter:
uses-material-design: true
assets:
- images/home/
- images/mine/