如何在 TabsIcon 中使用 SVG？

Question

我正在制作我的第一个 Flutter 应用程序，我有一个问题。我有一个底部导航栏，上面有来自 flutter 的图标。但我想在底部导航栏中使用 SVG 图标。我该怎么做？

我目前的代码：

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);


  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  int currentPage = 0;
  late TabController tabController;

  final List<Color> colors = [
    Colors.blue,
    Colors.blue,
    Colors.blue,
    Colors.blue,
    Colors.blue
  ];
  List<Widget> screens = [
    InAppWebViewExampleScreen(),
    GoogleScreen(),
    GoogleScreen(),
    YouTubeScreen(),
  ];

  @override
  void initState() {
    tabController = TabController(length: 5, vsync: this);
    tabController.animation!.addListener(
          () {
        final value = tabController.animation!.value.round();
        if (value != currentPage && mounted) {
          changePage(value);
        }
      },
    );
    super.initState();
  }

  void changePage(int newPage) {
    setState(() {
      currentPage = newPage;
    });
  }

  @override
  void dispose() {
    tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FrostedBottomBar(
          opacity: 0.6,
          sigmaX: 5,
          sigmaY: 5,
          child: TabBar(
            indicatorPadding: const EdgeInsets.fromLTRB(6, 0, 6, 0),
            controller: tabController,
            indicator: const UnderlineTabIndicator(
              borderSide: BorderSide(color: Colors.blue, width: 4),
              insets: EdgeInsets.fromLTRB(16, 0, 16, 8),
            ),
            tabs: [
              TabsIcon(
                  icons: Icons.home,
                  color: currentPage == 0 ? colors[0] : Colors.white),
              TabsIcon(
                  icons: Icons.search,
                  color: currentPage == 1 ? colors[1] : Colors.white),
              TabsIcon(
                  icons: Icons.queue_play_next,
                  color: currentPage == 2 ? colors[2] : Colors.white),
              TabsIcon(
                  icons: Icons.file_download,
                  color: currentPage == 3 ? colors[3] : Colors.white),
              TabsIcon(
                  icons: Icons.menu,
                  color: currentPage == 4 ? colors[4] : Colors.white),
            ],
          ),
          borderRadius: BorderRadius.circular(500),
          duration: const Duration(milliseconds: 800),
          hideOnScroll: false,
          body: (context, controller) => screens[currentPage]
      ),
    );
  }
}

class TabsIcon extends StatelessWidget {
  final Color color;
  final double height;
  final double width;
  final IconData icons;

  const TabsIcon(
      {Key? key,
        this.color = Colors.white,
        this.height = 60,
        this.width = 50,
        required this.icons})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: height,
      width: width,
      child: Center(
        child: Icon(
          icons,
          color: color,
        ),
      ),
    );
  }
}

我是Flutter的初学者，所以如果你有解决方案，请简单点。提前致谢！

Answer 1

我认为 BottomNavigationBar 无法做到这一点，但您有 2 个选择，要么制作图标包并将其添加到应用程序中，您可以参考 this link or using BottomAppBar instead of BottomNavigationBar which allow having a widget child and you can reference to this link。

Answer 2

不可能，您不能将它与 iconData 一起使用，您应该删除 TabsIcon 并尝试使用其他小部件。

如何在 TabsIcon 中使用 SVG？

How to use SVG in TabsIcon?

flutter