在项目中,图标会根据情况的不同,动态改变颜色和大小,使用svg,可以减少资源文件导入,flutter中使用svg,需用到flutter_svg
1、在pubspec.yaml引入flutter_svg
flutter_svg: ^1.0.3
2、导入svg
把svg文件导入asset目录下
并在pubspec.yaml添加svg对应的目录
assets:
- assets/images/tab/
记得执行
flutter pub get
3、使用
引入文件
import 'package:flutter_svg/flutter_svg.dart';
Container(
width: 72,
height: 72,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(36),
color: Color(0xffF5F7F9)),
child: Center(
child: SvgPicture.asset(
"assets/images/tab/scan_light.svg",
//动态改颜色
color: bOpenedLight
? Color(0xFFEF3B3B)
: Color(0xFF333333),
//动态改大小
width: 24,
),
),
)
效果图: