Comment utiliser une icône d'image (provenant d'actifs) au lieu d'une IconData et de la pagination bottomNavigationBar dans Flutter

Question

J'utilise bottomNavigationBar dans mon projet flutter. Je suis nouveau dans flutter et je n'ai aucune idée de la pagination et de l'utilisation d'icônes d'images d'actifs au lieu d'iconData. J'ai fait des recherches à ce sujet au cours des deux derniers jours, mais je n'ai pas obtenu satisfaction. Aidez-moi s'il vous plaît......

J'ai utilisé bottomNavigationBar avec un bouton fab d'ici https://medium.com/coding-with-flutter/flutter-bottomappbar-navigation-with-fab-8b962bb55013 https://github.com/bizz84/bottom_bar_fab_flutter

J'ai également essayé d'utiliser les icônes personnalisées d'ici https://medium.com/flutterpub/how-to-use-custom-icons-in-flutter-834a079d977

mais pas de succès

Je veux juste changer les icônes et je veux savoir comment utiliser la pagination. Ce que je peux faire change dans le dernier exemple de code pour la pagination.

Answer 1

Voici comment vous pouvez utiliser une icône provenant d'actifs

ImageIcon(
     AssetImage("images/icon_more.png"),
     color: Color(0xFF3A5A98),
),

Essayez cet exemple pour BottomNavBar cliquez sur

Donc là, ce que vous voulez remplacer est BottomNavigationBarItem

 new BottomNavigationBarItem(
           icon: Icon(Icons.home),
           title: Text('Home'),
         ),

à

 new BottomNavigationBarItem(
           icon: ImageIcon(
               AssetImage("images/icon_more.png"),
                    color: Color(0xFF3A5A98),
               ),
           title: Text('Home'),
         ),

Vous pouvez vous renseigner sur la navigation en lisant l'article que j'ai partagé.

UPDATE Voici un exemple comme vous l'avez demandé.

Donc, ici, la variable _children contient la liste des pages que vous voulez faire naviguer en fonction de la sélection de BottomNavBarItem.

La façon dont nous naviguons est la suivante : lorsque nous appuyons sur un élément de l'onglet, nous définissons son index en utilisant la fonction onTabTapped Lorsque l'index change, la vue est modifiée en conséquence, car nous avons demandé au corps de montrer l'index actuel des enfants.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;
  final List<Widget> _children = [
    Container(
      color: Colors.red,
    ),
    Container(
      color: Colors.blue,
    ),
    Container(
      color: Colors.green,
    )
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabTapped, // new
        currentIndex: _currentIndex, // new
        items: [
          new BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          new BottomNavigationBarItem(
            icon: Icon(Icons.mail),
            title: Text('Messages'),
          ),
          new BottomNavigationBarItem(
              icon: Icon(Icons.person), title: Text('Profile'))
        ],
      ),
    );
  }
}

Answer 2

Pour moi, l'option ImageIcon mentionnée ci-dessus n'a pas fonctionné. J'ai travaillé en utilisant Image.asset

BottomNavigationBarItem(
              title:Text(AppLocalizations.of(context).converter), icon: Image.asset(
            "images/convertericon.png",
          )),

Answer 3

Dans Flutter, vous pouvez créer une icône à partir d'une image en utilisant un widget appelé ImageIcon . Il vous suffit de fournir une instance de ImageProvider comme AssetImage , NetworkImage , MemoryImage y ResizeImage . L'exemple ci-dessous utilise AssetImage pour charger l'image. En supposant que vous ayez une copie et que vous chargiez l'image dans le fichier pubspec.yaml Si vous souhaitez créer une ImageIcon à partir d'une image, il vous suffit d'utiliser le code suivant.

Pour créer un ImageIcon vous devez appeler le constructeur

  const ImageIcon(
    this.image, {
    Key key,
    this.size,
    this.color,
    this.semanticLabel,
  })

Il vous suffit de passer l'image. Tous les paramètres nommés sont facultatifs.

Pour définir l'image à afficher en tant qu'icône, vous devez passer un fichier de type ImageProvider instance. Pour cela, vous devez créer une instance de n'importe quelle classe qui est un descendant d'ImageProvider tel que AssetImage

 ImageIcon(
   AssetImage('assets/images/pikachu.png'),
   size: 150,
   color: Colors.yellow,
 )

Utilisation de ImageIcon comme un icône Exemples

BottomNavigationBarItem(
    title: Text(“Cartoon”),
    icon: ImageIcon(
      AssetImage('assets/images/pikachu.png'),
    )
)

Vous pouvez également le faire pour utiliser

  BottomNavigationBarItem(
      title: Text("Cartoon"),
      icon: Image.asset("assets/images/pikachu.png", height: 30, width: 30, color: Colors.grey))