如何在 flutter 的底部导航栏中使用 svg 文件？答案

【问题标题】：how to use svg file in bottom nav bar in flutter?如何在 flutter 的底部导航栏中使用 svg 文件？
【发布时间】：2023-01-08 23:13:14
【问题描述】：

将外部图标放在底部导航栏中的方法是否正确，只能通过 svg 文件？

通过谷歌搜索理解问题 1，所以我尝试了下面的代码，但它只显示文本标签，没有应用程序图标。我该如何解决？

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

class HomePage extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0.0,
        backgroundColor: Colors.transparent,
        leading: Icon(Icons.arrow_back_outlined),
         title: Text ('MY ID Balance \$298.98'),
        actions: [Icon(Icons.menu)],
      ),
      extendBodyBehindAppBar: true,
      body: Container(
        decoration: BoxDecoration(
            image: DecorationImage(
                fit: BoxFit.cover,
                image: AssetImage('assets/image/auth_background.png')
            )
        ),

      ),
      bottomNavigationBar:
    BottomNavigationBar(
    type: BottomNavigationBarType.fixed,
    items: <BottomNavigationBarItem>[
    BottomNavigationBarItem(
    icon: SvgPicture.asset('assets/icons/bottomnav/menu.svg', width: 25, color: Colors.black,),
    label: 'menu'
    ),
    BottomNavigationBarItem(
    icon: SvgPicture.asset('assets/icons/bottomnav/pfp.svg', color: Colors.black54, width: 30),
    label: 'pfp',
    ),
   
    
    ],
    )

    );
  }
}

【问题讨论】：

您是否在 pubspec.yaml 文件中设置了 assets/icons/bottomnav/ 路径？
我在那里做了资产/图标。（除了 bottomnav 因为在图标下面）这不好吗？ @维沙尔扎维里

标签： flutter

【解决方案1】：

此包不支持所有 SVG。

您的 SVG 可能不受支持。通过运行这个 sn-p 来验证，

final SvgParser parser = SvgParser();
try {
  parser.parse('assets/icons/bottomnav/menu.svg', warningsAsErrors: true);
  print('SVG is supported');
} catch (e) {
  print('SVG contains unsupported features');
}

【讨论】：