How to use SVG in TabsIcon?

Issue

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!

Solution

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.

Answered By – LMech

Answer Checked By – Clifford M. (FlutterFixes Volunteer)