如何在 AnimatedBottomNavigationBar 中添加 svg 图像作为图标

Question

我需要使用这个自定义底部导航栏，但使用 Svg 图像而不是图标。

`脚手架( 扩展主体：真实， 正文：页面[_bottomNavIndex]， floatActionButtonLocation：FloatingActionButtonLocation.miniCenterDocked， 浮动操作按钮：浮动操作按钮（ 按下时：() { Navigator.pushNamed(context, "/addPost"); }, 海拔：10， 背景颜色：颜色.黑色， 孩子：图标（ 图标.添加， 颜色: 颜色.白色, 尺寸：30， ), 形状：const CircleBorder(), ), 底部导航栏：动画底部导航栏（ 图标：[ 图标.home， Icons.shopping_bag_rounded， 图标.flag, Icons.person_rounded ], 图标大小：30， 左角半径：34， 右角半径：34， 身高：80， 活动索引：_bottomNavIndex， 间隙位置：间隙位置.center， 缺口边距：8， 海拔：30， notchSmoothness：NotchSmoothness.smoothEdge， onTap: (索引) => setState(() => _bottomNavIndex = 索引), 背景颜色：CasaColors.white，

  ),

);`

这个图标

 final List<SvgPicture> iconList = [ SvgPicture.asset( 'assets/svg_icons/home.svg', width: 30, height: 30, ), SvgPicture.asset( 'assets/svg_icons/shopping_bag.svg', width: 30, height: 30, ), SvgPicture.asset( 'assets/svg_icons/flag.svg', width: 30, height: 30, ), SvgPicture.asset( 'assets/svg_icons/person.svg', width: 30, height: 30, ), ];

但我有一个错误“参数类型“List”无法分配给参数类型“List”。” 我无法将 svg 转换为 IconData。 有人可以帮忙吗？

我尝试转换 svg 以更改 BottomNavBar 类型，但它无法绘制我需要的形状。

Answer 1

该错误是因为

icons

需要

List<IconData>?

并且您提供了

List<SvgPicture>

。

有一种更灵活的方式来构建自定义图标。您可以使用

AnimatedBottomNavigationBar.builder

，并提供可以返回任何小部件的

tabBuilder

函数。

AnimatedBottomNavigationBar.builder(
      itemCount: iconList.length,
      tabBuilder: (int index, bool isActive) {
        // TODO: Customize it with an active color, and adjust it with your requirements.
        return iconList[index];
      activeIndex: _bottomNavIndex,
      gapLocation: GapLocation.center,
      notchSmoothness: NotchSmoothness.verySmoothEdge,
      leftCornerRadius: 32,
      rightCornerRadius: 32,
      onTap: (index) => setState(() => _bottomNavIndex = index),
      //other params
   )