I am making my first Flutter app and I have a question. I have a bottom navigation bar with icons from flutter. But I want to use SVG icons in the bottom navigation bar. How can I do that?

The code I have so far:

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,
        ),
      ),
    );
  }
}

I am a beginner in Flutter so if you have a solution, please make it simple. Thanks in advance!

CodePudding user response：

I do not think that is possible with BottomNavigationBar, but you have 2 options either making your icon pack and add it to the application and you can reference to this link or using BottomAppBar instead of BottomNavigationBar which allow having a widget child and you can reference to this link.

CodePudding user response：

It's not possible, you can't use it with iconData, you should remove TabsIcon and try to use another widget.