How to use SVG in TabsIcon? - flutter

Question

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!

Answer 1

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.

Answer 2

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