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

CodePudding user response：

Not sure what exactly you are looking for, but I don't see you adding Text widget in the row. And adding the width to container will hide other widgets.

class NavBarItem extends StatefulWidget {
  final IconData fontAwesomeIcons;
  final Function touched;
  final bool active;
  final color = Colors.white;
  final hoverColor = Colors.green;
  final String text;

  NavBarItem(
      {
      required this.active,
      required this.fontAwesomeIcons,
      required this.touched,
      required this.text
      });

  @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(
          height: 60,
          padding: const EdgeInsets.symmetric(vertical: 3.0),
          alignment: Alignment.centerLeft,
          child: Row(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    AnimatedContainer(
                      duration: const Duration(milliseconds: 475),
                      height: 35.0,
                      width: 5.0,
                      decoration: BoxDecoration(
                          color:
                              widget.active ? Colors.white : Colors.transparent,
                          borderRadius: const BorderRadius.only(
                              topRight: Radius.circular(10.0),
                              bottomRight: Radius.circular(10.0))),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 30.0),
                      child: Icon(
                        widget.fontAwesomeIcons,
                        color: widget.active ? Colors.white : Colors.white54,
                        size: 20.0,
                      ),
                    ),
                    const SizedBox(width: 16),
                    Text(widget.text),
                  ],
                ),
        ),
      ),
    );
  }
}