如何制作导航栏？解决animated bottom navigation bar包适配SVG文件问题

要实现用本地SVG文件替代默认的IconData，你可以借助flutter_svg包将SVG转为Widget，再传入导航栏的item中——因为AnimatedBottomNavigationBarItem的icon和activeIcon参数本身支持接收任意Widget，并非只能用IconData。

步骤1：添加依赖 #

在项目的pubspec.yaml中添加所需依赖：

dependencies:
  flutter:
    sdk: flutter
  animated_bottom_navigation_bar: ^3.1.0 # 建议使用最新版本
  flutter_svg: ^2.0.9 # 用于加载SVG文件

执行flutter pub get完成依赖安装。

步骤2：配置SVG资源 #

将SVG图标文件放在项目的assets/icons/目录下（路径可自行调整），并在pubspec.yaml中声明资源路径：

flutter:
  assets:
    - assets/icons/

步骤3：构建带SVG图标的导航栏 #

使用SvgPicture.asset加载SVG文件，直接作为导航栏item的图标参数，有两种实现方式：

方式一：使用customIconBuilder（适合统一控制图标样式）

import 'package:flutter/material.dart';
import 'package:animated_bottom_navigation_bar/animated_bottom_navigation_bar.dart';
import 'package:flutter_svg/flutter_svg.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentTabIndex = 0;

  // 定义SVG图标路径
  final List<String> _svgPaths = [
    'assets/icons/home.svg',
    'assets/icons/search.svg',
    'assets/icons/favorite.svg',
    'assets/icons/profile.svg',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const Center(child: Text('页面内容')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: AnimatedBottomNavigationBar(
        icons: [], // 留空，使用自定义图标构建器
        activeIndex: _currentTabIndex,
        gapLocation: GapLocation.center,
        notchSmoothness: NotchSmoothness.softEdge,
        onTap: (index) => setState(() => _currentTabIndex = index),
        // 自定义图标逻辑
        customIconBuilder: (index, isActive, progress) {
          return SvgPicture.asset(
            _svgPaths[index],
            width: 24,
            height: 24,
            colorFilter: ColorFilter.mode(
              isActive ? Colors.blueAccent : Colors.grey,
              BlendMode.srcIn,
            ),
          );
        },
      ),
    );
  }
}

方式二：直接传入AnimatedBottomNavigationBarItem（适合单独配置每个item）

// 省略重复的导入和State类代码，直接替换bottomNavigationBar部分
bottomNavigationBar: AnimatedBottomNavigationBar(
  activeIndex: _currentTabIndex,
  gapLocation: GapLocation.center,
  notchSmoothness: NotchSmoothness.softEdge,
  onTap: (index) => setState(() => _currentTabIndex = index),
  items: [
    AnimatedBottomNavigationBarItem(
      icon: SvgPicture.asset('assets/icons/home.svg', color: Colors.grey),
      activeIcon: SvgPicture.asset('assets/icons/home_active.svg'),
      title: const Text('首页'),
    ),
    AnimatedBottomNavigationBarItem(
      icon: SvgPicture.asset('assets/icons/search.svg', color: Colors.grey),
      activeIcon: SvgPicture.asset('assets/icons/search_active.svg'),
      title: const Text('搜索'),
    ),
    // 其余两个item依此类推
  ],
),

注意事项 #

• 如果不需要单独准备选中/未选中状态的SVG文件，可通过colorFilter动态修改图标颜色，无需多套资源。
• 确保SVG文件路径与pubspec.yaml中的资源声明完全匹配，避免加载失败。
• 可调整SvgPicture的width、height参数适配导航栏尺寸。

内容的提问来源于stack exchange，提问作者parham bk