0
votes

le texte en basNavigationBar n'est pas apparu !!! battement

Je suis nouveau avec flutter Je viens de faire ma première application. Alors, pardonnez-moi si ma question n'est pas claire.

Je travaille maintenant sur la barre de navigation inférieure. Je l'ai fait avec une icône et du texte, mais l'icône et le texte du premier seulement sont apparus. les autres seules icônes. Comment puis-je tout faire apparaître?

Voici le code

bottomNavigationBar:  BottomNavigationBar(
        items: [
         BottomNavigationBarItem(
            icon: new Icon(Icons.home, color: Colors.black45),
            title: new Text(
              "Ø§Ù„Ø±Ø¦ÙŠØ³ÙŠØ©",
              style: TextStyle(color: Colors.black45),
            )
        ),
         BottomNavigationBarItem(
            icon: new Icon(Icons.business, color: Colors.black45),
            title: new Text(
              "Ù…Ø±Ø³Ø§Ù„ Ø¨ÙŠØ²Ù†ÙŠØ³",
              style: TextStyle(color: Colors.black45),
            )),
         BottomNavigationBarItem(
            icon: new Icon(Icons.local_activity, color: Colors.black45),
            title: new Text(
              "Ø£Ù†Ø´Ø·Ø© Ù…Ø±Ø³Ø§Ù„",
              style: TextStyle(color: Colors.black45),
            )),
         BottomNavigationBarItem(
            icon: new Icon(Icons.favorite_border, color: Colors.black45),
            title: new Text(
              "ØªØ¨Ø±Ø¹",
              style: TextStyle(color: Colors.black45),
            )),
         BottomNavigationBarItem(
            icon: new Icon(Icons.help, color: Colors.black45),
            title: new Text(
              "Ø§Ù„Ø£Ø³Ø¦Ù„Ø© Ø§Ù„Ø´Ø§Ø¦Ø¹Ø©",
              style: TextStyle(color: Colors.black45),
            ))
      ],
        onTap: (currentIndex){
          _currentIndex  = currentIndex;
          if(_currentIndex==0)
            Navigator.push(context,new MaterialPageRoute(builder: (context)=>new HomePage()));
          else if(_currentIndex==1)
            Navigator.push(context,new MaterialPageRoute(builder: (context)=>new business()));
          else if(_currentIndex==2)
            Navigator.push(context,new MaterialPageRoute(builder: (context)=>new activity()));
          else if(_currentIndex==3)
            Navigator.push(context,new MaterialPageRoute(builder: (context)=>new donate()));
          else if(_currentIndex==4)
            Navigator.push(context,new MaterialPageRoute(builder: (context)=>new faq()));

        },
      ),

Et c'est le résultat:

Une autre question: comment puis-je rendre l'élément actif avec une couleur différente?

flutter

0 commentaires

3 Réponses :

3
votes

vous devez définir un type fixe pour votre BottomNavigationBar

 bottomNavigationBar:  BottomNavigationBar(
    type: BottomNavigationBarType.fixed,
    selectedItemColor: Colors.red,
    unselectedItemColor: Colors.black45,
    currentIndex: 4,


    items: [
      BottomNavigationBarItem(
          icon: new Icon(Icons.home,/*color: Colors.black45*/),
          title: new Text(
            "Ø§Ù„Ø±Ø¦ÙŠØ³ÙŠØ©",
            //style: TextStyle(color: Colors.black45),
          ),
      ),
      BottomNavigationBarItem(
          icon: new Icon(Icons.business, /*color: Colors.black45*/),
          title: new Text(
            "Ù…Ø±Ø³Ø§Ù„ Ø¨ÙŠØ²Ù†ÙŠØ³",
            //style: TextStyle(color: Colors.black45),
          )),
      BottomNavigationBarItem(
          icon: new Icon(Icons.local_activity, /*color: Colors.black45*/),
          title: new Text(
            "Ø£Ù†Ø´Ø·Ø© Ù…Ø±Ø³Ø§Ù„",
           // style: TextStyle(color: Colors.black45),
          )),
      BottomNavigationBarItem(
          icon: new Icon(Icons.favorite_border, /*color: Colors.black45*/),
          title: new Text(
            "ØªØ¨Ø±Ø¹",
            //style: TextStyle(color: Colors.black45),
          )),
      BottomNavigationBarItem(
          icon: new Icon(Icons.help, /*color:  Colors.black45 */),
          title: new Text(
            "Ø§Ù„Ø£Ø³Ø¦Ù„Ø© Ø§Ù„Ø´Ø§Ø¦Ø¹Ø©",
            //style: TextStyle(color: Colors.black45),
          ))
    ],

  ),

2 commentaires

Merci beaucoup, cela a fonctionné (Y) ... Mais comment puis-je rendre l'élément actif avec une couleur différente ??

vous devez supprimer les styles de couleur fixes que vous imposez à la barre de navigation et utiliser la couleur d'élément sélectionnée. veuillez vérifier le code édité بالتوفيق

0
votes

Définissez simplement un type pour la barre de navigation inférieure et vous verrez le texte.

 BottomNavigationBarItem(
          icon: Icon(Icons.attach_email),
          label: "Emails",
          backgroundColor: Colors.yellow.shade900),

Conseil: Et maintenant, le titre est très obsolète, utilisez donc la propriété label au lieu du titre.

  type: BottomNavigationBarType.fixed,

0 commentaires

0
votes

Je pense que vous pouvez refactoriser votre code pour le rendre plus lisible et plus propre au lieu d'utiliser des if imbriqués et sinon, vous pouvez simplement faire comme le code ci-dessus, assurez-vous que la fonction void à l'intérieur de la classe et en dehors de la fonction de construction de widget pour éviter toute erreur.

 void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

bottomNavigationBar:  BottomNavigationBar(
        items: [
         BottomNavigationBarItem(
            icon: new Icon(Icons.home, color: Colors.black45),
            title: new Text(
              "Ø§Ù„Ø±Ø¦ÙŠØ³ÙŠØ©",
              style: TextStyle(color: Colors.black45),
            )
        ),
         BottomNavigationBarItem(
            icon: new Icon(Icons.business, color: Colors.black45),
            title: new Text(
              "Ù…Ø±Ø³Ø§Ù„ Ø¨ÙŠØ²Ù†ÙŠØ³",
              style: TextStyle(color: Colors.black45),
            )),
         BottomNavigationBarItem(
            icon: new Icon(Icons.local_activity, color: Colors.black45),
            title: new Text(
              "Ø£Ù†Ø´Ø·Ø© Ù…Ø±Ø³Ø§Ù„",
              style: TextStyle(color: Colors.black45),
            )),
         BottomNavigationBarItem(
            icon: new Icon(Icons.favorite_border, color: Colors.black45),
            title: new Text(
              "ØªØ¨Ø±Ø¹",
              style: TextStyle(color: Colors.black45),
            )),
         BottomNavigationBarItem(
            icon: new Icon(Icons.help, color: Colors.black45),
            title: new Text(
              "Ø§Ù„Ø£Ø³Ø¦Ù„Ø© Ø§Ù„Ø´Ø§Ø¦Ø¹Ø©",
              style: TextStyle(color: Colors.black45),
            ))
      ],
        onTap:onTabTapped,
      ),

0 commentaires