Why BottomNavigationBarItem shows 4 icons and shows only first text?

[Niyazi Toros]

Hi,

Why BottomNavigationBarItem shows 4 icons and shows only first text?

Only shows first item text. :(

I am landing home page from login page.

import 'dart:io';
import 'package:flutter/material.dart';

// Statefull HomePage
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return new WillPopScope(
      onWillPop: () async => false,
      child: new Scaffold(
        appBar: new AppBar(
          //leading: null,
          automaticallyImplyLeading: false,
          title: new Text("Home Page"),
          backgroundColor: const Color(0xFF7CB342),
          actions: <Widget>[
            new IconButton(
              color: Colors.white,
              icon: new Icon(Icons.exit_to_app),
              onPressed: () => exit(0),
            ),
          ],
        ),
        body: new Center(
          child: Text("Home Page"),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home, color: Colors.green),
              title: Text(
                "Hesap",
                style: TextStyle(color: Colors.green),
              ),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.credit_card, color: Colors.green),
              title: Text(
                "Kredi Kartları",
                style: TextStyle(color: Colors.green),
              ),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.clear_all, color: Colors.green),
              title: Text(
                "Havale",
                style: TextStyle(color: Colors.green),
              ),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.dehaze, color: Colors.green),
              title: Text(
                "Fatura Ödeme",
                style: TextStyle(color: Colors.green),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

[Hans Muller]

This is as intended (and see https://material.io/design/components/bottom-navigation.html)

When  there are 4 or more bottom navigation bar items, only the selected item's title is shown, see https://docs.flutter.io/flutter/material/BottomNavigationBar-class.html).

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Niyazi Toros]

Hansmuller thank for the info. In https://material.io/design/components/bottom-navigation.html#anatomy section indicates that we can use 4 icon and text if

we set Flutter BottomNavigationBarType to be fixed. https://docs.flutter.io/flutter/material/BottomNavigationBarType-class.html 

Problem is, it states that when we use fixed

"The BottomNavigationBar's BottomNavigationBarItems have fixed width, always display their text labels, and do not shift when tapped."

Next step will be how to override the color of the icon and text to make bar items shift? Below is my working code of text and icon.

My second question is how to code so when I clicked any bar items it will loads another dart page that is nor reside in my home page.

bottomNavigationBar: BottomNavigationBar(
  type: BottomNavigationBarType.fixed,

  items: <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.home, color: Colors.green),

      title: new Text(
        "Accounts",
        style: TextStyle(color: Colors.green),

        onPress() => to load the account.dart page
      ),