With the following code, I create the structure for the Navigation Bar items on Flutter, and all of it works fine, but I can't make the 'text', 'labels', or 'titles' to be visible right next to the font awesome icons. Some of the parameters, which are the ones commented on, don't work either. Is there any functional way to do so?
Widget build(BuildContext context) {
return Container(
height: 350.0,
child: Column(
children: [
NavBarItem(
active: selected[0],
fontAwesomeIcons: FontAwesomeIcons.user,
text: 'sdfg',
touched: () {
setState(() {
select(0);
});
},
),
NavBarItem(
text: 'dfgdfg',
active: selected[1],
fontAwesomeIcons: FontAwesomeIcons.user,
touched: () {
setState(() {
select(1);
});
},
),
NavBarItem(
text: 'sdfgsdf',
active: selected[2],
fontAwesomeIcons: FontAwesomeIcons.user,
touched: () {
setState(() {
select(2);
});
},
),
NavBarItem(
text: 'ertdsf',
active: selected[3],
fontAwesomeIcons: FontAwesomeIcons.user,
touched: () {
setState(() {
select(3);
});
},
),
],
),
);
}
}
class NavBarItem extends StatefulWidget {
final IconData fontAwesomeIcons;
final Function touched;
final bool active;
final color = Colors.white;
final hoverColor = Colors.green;
// final String title;
// final Text title;
NavBarItem(
{
// required this.title,
required this.active,
required this.fontAwesomeIcons,
required this.touched,
required String text
// required String label
});
@override
_NavBarItemState createState() => _NavBarItemState();
}
class _NavBarItemState extends State<NavBarItem> {
@override
Widget build(BuildContext context) {
return Material(
color: Colors.transparent,
child: InkWell(
onTap: () {
widget.touched();
},
splashColor: Colors.white,
hoverColor: Colors.white12,
child: Container(
padding: EdgeInsets.symmetric(vertical: 3.0),
child: Row(
children: [
Container(
height: 60.0,
width: 80.0,
child: Row(
children: [
AnimatedContainer(
duration: Duration(milliseconds: 475),
height: 35.0,
width: 5.0,
decoration: BoxDecoration(
color:
widget.active ? Colors.white : Colors.transparent,
borderRadius: BorderRadius.only(
topRight: Radius.circular(10.0),
bottomRight: Radius.circular(10.0))),
),
Padding(
padding: EdgeInsets.only(left: 30.0),
child: Icon(
widget.fontAwesomeIcons,
color: widget.active ? Colors.white : Colors.white54,
size: 20.0,
),
),
],
),
)
],
),
),
),
);
}
}