CODEWITHSUNDEEP
flutterdart
Ankit
Ankit

Reputation: 669

How to wrap text inside bottom navigation

I am trying to build a flutter application where I want to use a bottom navigation bar. But on the bottom navigation item where the item's length is more the text does not wrap. I want to wrap the text to the next line.

Following is the image of what is happening:

enter image description here

Following is the code:

class HomeScreen extends StatefulWidget {
@override
  _HomeScreenState createState() => _HomeScreenState(imageurl, name, email);
}

class _HomeScreenState extends State<HomeScreen> {
@override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
bottomNavigationBar: Theme(
        data: Theme.of(context).copyWith(
            // sets the background color of the `BottomNavigationBar`
            canvasColor: Colors.white,
            // sets the active color of the `BottomNavigationBar` if `Brightness` is light
            primaryColor: Colors.red,
            textTheme: Theme.of(context)
                .textTheme
                .copyWith(caption: new TextStyle(color: Colors.yellow))),
        child: SizedBox(
          height: 90,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              BottomNavigationBar(
                selectedItemColor: Colors.orange,
                type: BottomNavigationBarType.fixed,
                unselectedFontSize: 12,
                elevation: 2,
                currentIndex: 2, // this will be set when a new tab is tapped
                items: [
                  BottomNavigationBarItem(
                    icon: new Icon(
                      Icons.home_outlined,
                      color: Colors.black,
                    ),
                    title: Flexible(
                      child: new Text(
                        'Home',
                        style: TextStyle(
                          color: Colors.black,
                        ),
                      ),
                    ),
                  ),
                  BottomNavigationBarItem(
                    icon: new Icon(
                      Icons.star_border,
                      color: Colors.black,
                    ),
                    title: Flexible(
                      child: new Text(
                        ‘Decideit who,
                        style: TextStyle(
                          color: Colors.black,
                        ),
                      ),
                    ),
                  ),
                  BottomNavigationBarItem(
                    icon: Icon(
                      Icons.location_city,
                      //color: Colors.black,
                    ),
                    title: Flexible(
                      child: Text(
                        'Post Question',
                        style: TextStyle(
                          color: Colors.black,
                        ),
                      ),
                    ),
                  ),
                  BottomNavigationBarItem(
                      icon: Icon(
                        Icons.people_outline,
                        color: Colors.black,
                      ),
                      title: Flexible(
                        child: Text(
                          'Communities',
                          style: TextStyle(
                            color: Colors.black,
                          ),
                        ),
                      )),
                  BottomNavigationBarItem(
                      icon: Icon(
                        Icons.person_outline,
                        color: Colors.black,
                      ),
                      title: Flexible(
                        child: Text(
                          'Profile',
                          style: TextStyle(
                            color: Colors.black,
                          ),
                        ),
                      ))
                ],
              ),
            ],
          ),
        ),
      ),
);
}
}

Can someone help me how to show the ... to text in the next line please?

Upvotes: 0

Views: 2027

Answers (4)

Knospfer
Knospfer

Reputation: 116

You can try using FittedBox instead of Flexibles, at least for the log named BottomNavigationBarItems

here's an example

 BottomNavigationBarItem(
                icon: new Icon(
                  Icons.home_outlined,
                  color: Colors.black,
                ),
                title: FittedBox(
                  child: new Text(
                    'Home',
                    style: TextStyle(
                      color: Colors.black,
                    ),
                  ),
                ),
              ),

And here's the documentation: https://api.flutter.dev/flutter/widgets/FittedBox-class.html

But as Sagar Sabhadiya already told you, I would recommend you to change the design if you can

Upvotes: 1

Jesswin
Jesswin

Reputation: 281

just wrap your Text widget of Bottom Bavigation Bar to FittedBox() widget and you are good to go!

FittedBox(child: Text(
                "Communityyyyyyyyy",
              ),
            ),

Upvotes: 0

Sagar Sabhadiya
Sagar Sabhadiya

Reputation: 54

You have too large name in your bottom navigation. If you can change your design then change it. because i this it will be helpful to you. You can check this flutter library https://pub.dev/packages/persistent_bottom_nav_bar

Upvotes: 1

Javad Moradi
Javad Moradi

Reputation: 994

I guess you could wrap your text widget in an element like SizedBox or Expaned and do something like:

BottomNavigationBarItem(
                  icon: Icon(
                    Icons.people_outline,
                    color: Colors.black,
                  ),
                  title: Expanded(
                    child: Text(
                      'Communities',
                      maxLines: 4 // however many lines you would want as a maximum
                      style: TextStyle(
                        color: Colors.black,
                      ),
                    ),
                  ),
                ),

or

 BottomNavigationBarItem(
                  icon: Icon(
                    Icons.people_outline,
                    color: Colors.black,
                  ),
                  title: SizedBox(
                   height: 80
                    child: Text(
                      'Communities',
                      maxLines: 4 // however many lines you would want as a maximum
                      style: TextStyle(
                        color: Colors.black,
                      ),
                    ),
                  ),
                ),

Upvotes: 1

Related Questions