sooxt98
Icon and text mis-allign
Hi , im using the repo to build a navigation bar , but the icon and text are not in same line.Im using custom icon build using svg files to font. Cross verified with inbuild icons still same.
Below is the code and photo for referance.
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
extendBody: true,
body: Column(
children: [
Expanded(child: _buildFragmet()),
],
),
bottomNavigationBar: Container(
clipBehavior: Clip.hardEdge,
margin: EdgeInsets.symmetric(horizontal: 15, vertical: 0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20), color: Colors.transparent),
child: SafeArea(
child: GNav(
// rippleColor: Colors.pink,
hoverColor: buttonBackground,
gap: 5,
style: GnavStyle.google,
// textSize: 10,
backgroundColor: buttonBackground,
activeColor: Colors.black,
iconSize: 15,
padding: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
duration: Duration(milliseconds: 400),
tabBackgroundColor: primaryColor,
tabMargin: EdgeInsets.zero,
color: primaryColor,
tabs: [
GButton(
margin: EdgeInsets.fromLTRB(10, 20, 0, 20),
icon: CustomIcons.customhomeicon,
text: 'Home',
),
GButton(
gap: 10,
margin: EdgeInsets.symmetric(vertical: 20),
icon: CustomIcons.customcontenticon,
text: 'Content',
),
GButton(
margin: EdgeInsets.symmetric(vertical: 20),
icon: CustomIcons.customstoriesicon,
text: 'Stories',
),
GButton(
margin: EdgeInsets.symmetric(vertical: 20),
icon: CustomIcons.customemotionicon,
text: 'Emotions',
),
GButton(
margin: EdgeInsets.fromLTRB(0, 20, 10, 20),
icon: CustomIcons.custommenuicon,
text: 'Menu',
),
],
selectedIndex: _selectedIndex,
onTabChange: (index) {
print(index);
setState(() {
_selectedIndex = index;
});
},
),
),
),
);
}
I have checked your code line number 140 in button.dart replace Stack as Row and bring up the icon in the first index . This will fix the issue.