J'ai inséré des icônes personnalisées dans mon application et lorsque j'exécute l'application, les icônes et le texte sont blancs, au lieu de la couleur d'origine.

Deux problèmes:

1) Les icônes sont à l'origine noires, mais lorsque je les insère dans mes éléments de navigation inférieurs, elles deviennent blanches.

2) De plus, seul le premier élément a un titre sous l'icône, le reste n'en a pas.

Voici mon code

      bottomNavigationBar: BottomNavigationBar(
      items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(const IconData(0xe903, fontFamily: 'navBar')),
          title: Text('Home'),
        ),
        BottomNavigationBarItem(
          icon: Icon(const IconData(0xe902, fontFamily: 'navBar')),
          title: Text('Ideas')
        ),
        BottomNavigationBarItem(
          icon: Icon(const IconData(0xe903, fontFamily: 'navBar')),
          title: Text('Profile')
        ),
        BottomNavigationBarItem(
            icon: Icon(const IconData(0xe901, fontFamily: 'navBar')),
            title: Text('Bag')
        ),

      ],
  ),

//pubspec.yaml file

  fonts:
- family: navBar
  fonts:
    - asset: assets/fonts/ic_navbar.ttf

Les 4 icônes

enter image description here

2
Kristofer 20 nov. 2018 à 04:29

3 réponses

Meilleure réponse

Vous devez ajouter un type pour votre ButtomNavigationBar

    bottomNavigationBar: BottomNavigationBar(

        //Add this line will fix the issue.
        type: BottomNavigationBarType.fixed,

        currentIndex: 0, // this will be set when a new tab is tapped
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: new Icon(const IconData(0xe903, fontFamily: 'navBar')),
            title: new Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(const IconData(0xe902, fontFamily: 'navBar')),
            title: new Text('Messages'),
          ),
          BottomNavigationBarItem(
              icon: Icon(const IconData(0xe903, fontFamily: 'navBar')),
              title: Text('Profile'),
          ),
          BottomNavigationBarItem(
              icon: Icon(const IconData(0xe901, fontFamily: 'navBar')),
              title: Text('Bag')
          ),

        ],

      ),
5
Saed Nabil 20 nov. 2018 à 05:52

Vous pouvez utiliser le code suivant pour changer la couleur de l'icône dans la barre de navigation inférieure

BottomNavigationBarItem(
 icon:IconTheme(child: Icon(Icons.date_range),
   data:IconThemeData(color:Colors.yellow)),
 title:Text('Schedule')
)
0
vipin agrahari 20 nov. 2018 à 06:54

Essayez les icônes fournies dans les icônes de matériau, https: //docs.flutter. io / flutter / material / Icons-class.html pour faire une sorte de débogage, si l'erreur persiste, l'erreur est d'un autre côté, pouvez-vous envoyer tout le code et envoyer les actifs que vous utilisez? entrez la description de l'image ici

0
Luis Meneses 20 nov. 2018 à 05:31